CODEWITHSUNDEEP
javascriptsvg
Ashokkumar
Ashokkumar

Reputation: 325

Rotating a polygon in SVG

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:

Img

<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

Answers (2)

Tuğca Eker
Tuğca Eker

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

Ry-
Ry-

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

Related Questions