Объединение объектов в SVG

Question

Необходимо создать input-range в виде дуги. Как объединить точку с path, чтобы они формировали единое целое? Использование marker-start и marker-end дает один и тот же результат.

п.с. Если знаете другие варианты создания круглого range, поделитесь ими, пожалуйста.

svg {
  transform: rotate(35deg);
}

.path {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

<svg id="svg" width="25%" height="25%" viewbox="0 0 100 100">
  <defs>
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="5"
      markerHeight="5"
    >
      <circle cx="5" cy="5" r="5" fill="black" />
    </marker>
  </defs>
  <path
    class="path"
    fill="none"
    stroke-linecap="round"
    stroke-width="1"
    stroke="#6A8484"
    stroke-dasharray="200,230.2"
    d="M50 10
       a 40 40 0 0 1 0 80
       a 40 40 0 0 1 0 -80"
    marker-end="url(#dot)"
  ></path>

  <path
    fill="none"
    stroke-linecap="round"
    stroke-width="1"
    stroke="#EBBE8B"
    stroke-dasharray="150,230.2"
    d="M50 10
       a 40 40 0 0 1 0 80
       a 40 40 0 0 1 0 -80"
    marker-start="url(#dot)"
  ></path>
</svg>

Answer 1

Можно обойтись одной дугой. Правда, если дуга будет динамической, нужно будет внимательно отслеживать значения четвёртого и пятого параметра.

svg {
  transform: rotate(45deg);
}

.path {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

<svg id="svg" width="25%" height="25%" viewbox="0 0 100 100">
  <defs>
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="5"
      markerHeight="5"
    >
      <circle cx="5" cy="5" r="5" fill="black" />
    </marker>
  </defs>
  <path
    class="path"
    fill="none"
    stroke-linecap="round"
    stroke-width="1"
    stroke="#6A8484"
    stroke-dasharray="200,230.2"
    d="M50 10
       a 40 40 0 1 1 -40 40"
    marker-start="url(#dot)"
    marker-end="url(#dot)"
  ></path>

</svg>

БЛОГ НА HUSL

Объединение объектов в SVG

Ответы (1 шт):