svg многоугольник с двойной обводкой

Question

По исходным данным я должен построить следующую диаграмму:

Основная проблема сейчас - Многоугольник с двойными границами. Я пробовал тени и двойные полигоны, это не работает. Любая идея?

Я использовал следующий код для создания точек для многоугольника

const p: number = includeChapter ? chapter.points : 1;
  const x: number = cx + Math.round(Math.sin(i * angle) * R * p);
  const y: number = cy - Math.round(Math.cos(i * angle) * R * p);

Если я изменю радиус и попытаюсь создать два разных полигона, у меня будет следующее

Как добиться, чтобы у многоугольника была двойная обводка?

_{Свободный перевод вопроса svg Polygon with double border от участника @Griha Mikhailov
.}

Answer 1

Лучше всего использовать обтравочный контур (clipping path) или маску.

Вот версия обтравочного контура:

<svg width="400" viewBox="-100 -100 200 200">
  <defs>
    <clipPath id="graph-clip">
      <polygon points="0,-85, 60,-60, 85,0, 35,35, 0,85, -35,35, -85,0, -35,-35"/>
    </clipPath>
  </defs>
  
  <!-- Draw the shape in light orange -->
  <polygon points="0,-85, 60,-60, 85,0, 35,35, 0,85, -35,35, -85,0, -35,-35"
           fill="none" stroke="rgb(255,210,128)" stroke-width="10"/>
  <!-- Now draw the shape again. This time in a darker orange. But we clip the stroke
       to the shape so only the inside of the stroke visible -->
  <polygon points="0,-85, 60,-60, 85,0, 35,35, 0,85, -35,35, -85,0, -35,-35"
           fill="none" stroke="orange" stroke-width="10" clip-path="url(#graph-clip)"/>

</svg>

Обратите внимание, что все определения многоугольника точно такие же. Таким образом, вы можете использовать <use> для упрощения.

<svg width="400" viewBox="-100 -100 200 200">
  <defs>
    <clipPath id="graph-clip">
      <polygon id="graph-shape" points="0,-85, 60,-60, 85,0, 35,35, 0,85, -35,35, -85,0, -35,-35"/>
    </clipPath>
  </defs>
  
  <use xlink:href="#graph-shape"
       fill="none" stroke="rgb(255,210,128)" stroke-width="10"/>
  <use xlink:href="#graph-shape"
       fill="none" stroke="orange" stroke-width="10" clip-path="url(#graph-clip)"/>

</svg>

_{Свободный перевод ответа от участника @Paul LeBeau.}

БЛОГ НА HUSL

svg многоугольник с двойной обводкой

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