Reputation: 325
In the code below, I tried to move the polygon which is the arrow's head and place it at the position 100,100. But polygon is placed at wrong direction. The position of line and will change depending upon the input. I need the output to be something like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<polygon class="st0" points="2,7 0,0 11,7 0,14" transform="translate(100,100) rotate(45 0 0)"/ stroke="red" fill="red"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="green"/>
</svg>
Upvotes: 6
Views: 8093
Reputation: 1493
You are using
rotate(deg, cx, cy)
to rotate element. With this configuration, it means that rotate the element deg degree with respect to point (cx,cy) (of element)
So you should set cx, cy value as a center of your element.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<polygon class="st0" points="2,7 0,0 11,7 0,14" transform="translate(100,100) rotate(45 10 0)"/ stroke="red" fill="red"/>
<line x1="0" y1="0" x2="100" y2="100" stroke="green"/>
</svg>
Upvotes: 4
Reputation: 225291
The smallest fix is probably to add a translation that lets you treat the concave part of the arrow as the origin for both the rotation and other translation.
<polygon … transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="2,7 0,0 11,7 0,14" transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" stroke="red" fill="red" />
<line x1="0" y1="0" x2="100" y2="100" stroke="green" />
</svg>
Upvotes: 5