svg Polygon with double border

user_11849164 0
Viewed 146

I should make the next diagram according to input data.enter image description here

The main problem now is Polygon with double borders. I tried shadows and double polygons, it doesn't work well. Any idea?

I used next code to create points for Polygon

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

If I change radius and trying to create two different polygons i have next thing

enter image description here

reactjs polygon svg javascript
1 Answers

The best way is to use a clipping path or mask. Here is a clipping path version.

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

Note that all the polygon definitions are exactly the same. So you can use <use> to simplify things.

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

user_12928480
Related