在SVG

Question

在下面的代码中，我尝试移动箭头头部的多边形并将其放置在位置100,100处。但多边形放置在错误的方向。线的位置将根据输入而改变。我需要输出是这样的：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在使用

rotate(deg, cx, cy)

旋转元素。使用此配置，意味着相对于点（cx，cy）（元素）旋转元素 deg 度

因此，您应将cx，cy值设置为元素的中心。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

最小的修正可能是添加一个平移，让你可以将箭头的凹陷部分视为旋转和其他平移的原点。

<polygon … transform="translate(100 100) rotate(45 0 0) translate(-2 -7)" />

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;