--- In [email protected], "susan.darts" <susan.darts@...> wrote:
>
> Hello all,
>
> I have a trapezoid formed shape, drawn by path. It looks like a rectangle
> with triangels on the left and right border.
>
> Now I want to scale this shape horizontally. It works fine, but scaling
> increases the angels of the triangels too. They are going to be sharper. What
> I want is scale the rectangle part and keep the triangle parts without
> scaling.
>
> There is a given layout component. I can't change it.
>
> How I could solve this issue within SVG? I have no clue. I tried to split the
> shape in three parts but if I don't scale the triangle parts, they are wrong
> positioned.
>
>
> I would be happy about any hints. Thanx ahead :)
>
> Susan
>
(I sent this earlier, but seems to have been lost)
Hi Susan,
Rather than scaling, you could try dynamically changing the path segments.
The SVG path has an Object(pathSegList) that specifies or receives the contents
of the d attribute of a path. For instance, a path could be built as follows:
var NS="http://www.w3.org/2000/svg";
var myPath=document.createElementNS(NS,"path");
myPath.setAttribute("fill","none")
myPath.setAttribute("stroke-width",4)
myPath.setAttribute("stroke","crimson")
//---used in Segment Builds---
var pathSegList=myPath.pathSegList
//---d="M 21 273,C 89 112,201 112,284 270"---
var pathSegM1=myPath.createSVGPathSegMovetoAbs(21,260)
//---first point is placed at third point---
var
pathSegC2=myPath.createSVGPathSegCurvetoCubicAbs(284,260,89,112,201,112)
//---close path---
var pathSegZ3=myPath.createSVGPathSegClosePath()
pathSegList.appendItem(pathSegM1)
pathSegList.appendItem(pathSegC2)
pathSegList.appendItem(pathSegZ3)
mySVG.appendChild(myPath)
Once the path is bult in this manner, the segments can be accessed and
dynamically changed.
Regards,
Francis
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
