SVG标记 - 我可以设置长度和角度吗？ [英] SVG marker - can I set length and angle?

问题描述

我正试图从圆心开始画一个角度（60度）的6支装。

I'm trying to draw 6 sticks starting from the centre of the circle with an angle (60 degrees)

图片中的内容是通过手动设置坐标来实现的。是否可以使用角度和长度来绘制这6支？如有必要，我愿意使用图书馆。

What's in the picture is achieved by setting up coordinates manually. Would it be possible to use angle and length to draw these 6 sticks? If necessary, I'm willing to use a library.

<defs>
  <marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
  <circle cx="7" cy="7" r="3" style="stroke: none; fill:#ef4b22;" />
  </marker>
</defs>

        <path d="M150,5 L150,55"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M25,60 L75,95"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M20,225 L68,200"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M275,60 L225,95"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M280,225 L220,200"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M150,300 L150,250"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />

推荐答案

这是我为你做的演示。

使用的主要功能是在圆圈上找到一个点，如下所示：

The main function used is to find a point on a circle, as below:

function findPoint(cx, cy, rad, cornerGrad){
  var cornerRad = cornerGrad * Math.PI / 180;
  var nx = Math.cos(cornerRad)*rad + cx;
  var ny = Math.sin(cornerRad)*rad + cy;
  return { x: nx, y: ny };
}

这篇关于SVG标记 - 我可以设置长度和角度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！