CODEWITHSUNDEEP
htmlcsssvg
s1n7ax
s1n7ax

Reputation: 3069

SVG attribute stroke-linejoin is not working

I'm expecting rounded corners at the top, right, bottom and left points in below polygon. It doesn't seem to do anything for stroke-linejoin attribute

#container {
  display: block;
  width: 600px;
  height: 400px;
}

.poly {
  fill: #4d4d4d;
  stroke-linejoin: round;
  stroke-width: 5px;
  stroke: #19f6e8;
}
<div id="container">
    <svg width="100%" height="100%">
        <svg width="50%" height="50%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon class="poly" points="0,50 50,0 100,50 50,100" />
        </svg>
    </svg>
</div>

Upvotes: 0

Views: 1917

Answers (3)

Reza Roshan
Reza Roshan

Reputation: 446

The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.

The round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero length subpath, the stroke consists of a full circle centered at the subpath's point.

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">

  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black"
        stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black"
        stroke-linecap="round" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124179

Your drawing extends outside the canvas bounds. See what happens when you make the viewBox bigger...

Strokes are drawn half inside the line and half outside.

#container {
  display: block;
  width: 600px;
  height: 400px;
}

.poly {
  fill: #4d4d4d;
  stroke-linejoin: round;
  stroke-width: 5px;
  stroke: #19f6e8;
}
<div id="container">
    <svg width="100%" height="100%">
        <svg width="50%" height="50%" viewBox="-5 -5 110 110" preserveAspectRatio="none">
            <polygon class="poly" points="0,50 50,0 100,50 50,100" />
        </svg>
    </svg>
</div>

Upvotes: 2

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

Your outside corners are actually rounded, but the outline is outside of your viewBox (because it gets distributed evenly on both sides of the actual polygon line) and therefore cut off. If you move the points 10 units from the borders of the viewBox, you can see the rounding (and increasing the stroke-width helps to see it even better).

document.querySelector('#toggle').addEventListener('click', () => {
  var polyEl = document.querySelector('polygon.poly');
  polyEl.classList.toggle('round');
});
#container {
  display: block;
  width: 600px;
  height: 400px;
}

.poly {
  fill: #4d4d4d;
  stroke-width: 15px;
  stroke: #19f6e8;
}

.poly.round {
  stroke-linejoin: round;
}
<button id="toggle">toggle stroke-linejoin</button>
<div id="container">
  <svg width="80%" height="80%">
        <svg width="50%" height="50%" viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon class="poly round" points="10,50 50,10 90,50 50,90" />
        </svg>
  </svg>
</div>

Upvotes: 2

Related Questions