svg 带双边框的多边形

编程问答 2022-11-24

问题描述

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

enter image description here

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

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

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

如果我改变半径并尝试创建两个不同的多边形，我接下来要做的事情

enter image description here

解决方法

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

<svg width="400" viewBox="-100 -100 200 200">
  <defs>
    <clipPath id="graph-clip">
      <polygon points="0,-85,60,-60,85,35,-35,-35"/>
    </clipPath>
  </defs>
  
  <!-- Draw the shape in light orange -->
  <polygon points="0,-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,-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,-35"/>
    </clipPath>
  </defs>
  
  <use xlink:href="#graph-shape"
       fill="none" stroke="rgb(255,128)" stroke-width="10"/>
  <use xlink:href="#graph-shape"
       fill="none" stroke="orange" stroke-width="10" clip-path="url(#graph-clip)"/>

</svg>

javascriptpolygonreactjsreactjsreactjsreactjssvgsvgsvg