javascript - Rotating a polygon in SVG - Stack Overflow

admin管理员组

文章数量:1277336

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="" xmlns: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>

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/2000/svg" xmlns:xlink="http://www.w3/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>

• javascript
• svg

Share Improve this question Follow edited Jan 23, 2017 at 14:53 Tuğca Eker 1,4931313 silver badges2020 bronze badges asked Jan 23, 2017 at 13:40 AshokkumarAshokkumar 32544 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/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>

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/2000/svg" xmlns:xlink="http://www.w3/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>

本文标签： javascriptRotating a polygon in SVGStack Overflow