SVG-маркер - могу ли я задать длину и угол?

Я пытаюсь нарисовать 6 палочек, начиная с центра круга с углом (60 градусов)

Что на картинке достигается путем настройки координат вручную. Можно ли использовать угол и длину, чтобы нарисовать эти 6 палочек? Если необходимо, я готов использовать библиотеку.

Ответы

Ответ 1

Здесь приведена демонстрация, которую я сделал для вас.

Основная функция - найти точку на круге, как показано ниже:

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

Ответ 2

После обволакивания этой области некоторое время я придумал решение, которое вообще не требует каких-либо скриптов, таким образом, это только SVG. В этом есть несколько идей:

Ваш маркер не изменяется.
Для упрощения вопросов элементы помещаются в начало SVG в левом верхнем углу. Все видимые элементы затем группируются в один <g>, который будет переведен на нужный сдвиг, таким образом, транслируя все элементы сразу. Это освобождает вас от учета положения центра окружности для каждого вычисления координат.
В разделе <defs> есть <line>, который действует как шаблон для палочек, которые будут расположены вокруг большого круга. Установка только атрибута y1 устанавливает значения x1, y1 и x2 в значения по умолчанию 0. Однако значение y1 определяет длину палочек. Эта линия должна быть переведена радиусом окружности (97,5) для правильной установки.
При объединении внутри группы палки включаются элементом <use>, ссылающимся на шаблон строки из <defs>. Затем вы можете установить желаемое вращение для каждой отдельной палки, указав transform="rotate(..)".

#markerCircle > circle {
    stroke: none;
    fill: #ef4b22;
}

#stick {
    stroke: #ef4b22;
    stroke-width: 2px;
    fill: none;
    marker-start: url(#markerCircle);
}

circle {
    stroke: #ef4b22;
    stroke-width: 10px;
    fill: none;
}

<svg width="400" height="400" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <defs>
        <marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
            <circle cx="7" cy="7" r="3"/>
        </marker>
        <line id="stick" y1="50" transform="translate(0,97.5)"/>
    </defs>
    
    <g transform="translate(150,152.5)">
        <circle r="97.5" />
        <use xlink:href="#stick" transform="rotate(0)" />
        <use xlink:href="#stick" transform="rotate(60)" />
        <use xlink:href="#stick" transform="rotate(120)" />
        <use xlink:href="#stick" transform="rotate(180)" />
        <use xlink:href="#stick" transform="rotate(240)" />
        <use xlink:href="#stick" transform="rotate(300)" />
    </g>
  
</svg>