在 SVG 中旋转多边形

Question

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

<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

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

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

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