javascript - 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);

如果我改变半径并尝试创建两个不同的多边形，我有下一件事

Answer 1

最好的方法是使用剪切路径或蒙版。这是一个剪切路径版本。

<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 is 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>