带有双边框的 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>

带有双边框的 svg 多边形

svg Polygon with double border

javascript

svg

polygon

reactjs