在SVG中旋转多边形

Question

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> 

Answer 1

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> 

Answer 2

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>