Question

我有一个SVG对象，一个有3个点的多边形。我想使用javascript旋转多边形并在点附近添加文本。如何找到该点的坐标？

<svg width="165" height="165" style="border: 1px solid black; ">
  <path d="M5 0   Q 80 70 160 0" stroke="black" fill="transparent"/>
  <path d="M5 165 Q 80 90 160 165" stroke="black" fill="transparent"/>

  <polygon points="77.5,20 87.5,20 82.5,75" 
           style="fill:transparent;stroke:black;stroke-width:1"                                                   transform="rotate(90 82.5 20) " />

</svg>

我想将多边形旋转到原始90位置0到-180度之间，并在尖端添加标签，以便用户知道它旋转了多远。

Answer 1

要旋转多边形，您可以使用CSS转换属性，例如

.svg-el {
 transform: rotate(90deg);
}

要使用JS操作它的多边形中的任何路径或点，您可以使用像animejs http://animejs.com/documentation/#motionPath这样的库

找到svg多边形的点

1 个答案: