svg 带双边框的多边形答案

【问题标题】：svg Polygon with double bordersvg 带双边框的多边形
【发布时间】：2021-07-16 10:29:24
【问题描述】：

我应该根据输入的数据制作下一张图。

现在的主要问题是带有双边框的多边形。我试过阴影和双多边形，效果不好。有什么想法吗？

我使用下一个代码为多边形创建点

  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 过滤器的多边形，例如 feMorphology operator="dilate" stackoverflow.com/questions/56654710/svg-filter-with-variable

标签： javascript reactjs svg polygon

【解决方案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>

【讨论】：

一如既往，对我来说是一个机智而有用的解决方案感谢您慷慨地分享您的想法