CODEWITHSUNDEEP
csssvg
Alexandr Belov
Alexandr Belov

Reputation: 1834

SVG stroke-width not working

How to make the SVG shape outline thicker / thinner. I am trying to implement the stroke-width property, but it is ignored by SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF">
<path stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/>
</svg>

JSFiddle

Upvotes: 38

Views: 34745

Answers (3)

herrstrietzel
herrstrietzel

Reputation: 17155

In addition to Robert Longson's answer:

Rendered SVG elements without any specified stroke properties have a default stroke-width of 1px.

Therefore, applying only a stroke value (stroke color) other than "none" will result in a 1px stroke-width.

So if you need to check whether an element is rendered with a stroke, you need to retrieve both stroke and stroke-width property values:

let hasStroke0 = hasStroke(path0)
console.log(hasStroke0);

let hasStroke1 = hasStroke(path1)
console.log(hasStroke1);

let hasStroke2 = hasStroke(path2)
console.log(hasStroke2);

function hasStroke(el) {
  let hasStroke = false;
  let style = window.getComputedStyle(el);
  let strokeWidth = style.strokeWidth;
  let strokeColor = style.stroke;
  
  if(strokeColor!=='none' && parseFloat(strokeWidth)){
    hasStroke = true;
  }
  
  return hasStroke
}
svg{
  width:10em;
  obverflow:visible;
  border: 1px solid #ccc
}
<h3>No stroke or stroke-width</h3>
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 475.075 475.075" fill="#FFF">
<path id="path0" d="M475.1 186.6c0-7.1-5.3-11.4-16-13.2l-143.3-20.8l-64.3-129.9c-3.6-7.8-8.3-11.7-14-11.7s-10.3 3.9-14 11.7l-64.2 129.9l-143.3 20.8c-10.7 1.7-16 6.1-16 13.2c0 4 2.4 8.5 7.1 13.7l104 101l-24.6 142.8c-0.4 2.7-0.6 4.6-0.6 5.7c0 4 1 7.4 3 10.1s5 4.2 9 4.2c3.5 0 7.3-1.2 11.4-3.5l128.2-67.3l128.2 67.3c4 2.3 7.8 3.5 11.4 3.5c7.9 0 11.8-4.8 11.8-14.3c0-2.5-0.1-4.4-0.3-5.7l-24.6-142.8l103.7-101c4.9-5 7.4-9.5 7.4-13.7zm-150.5 101.9l20.6 120.2l-107.6-56.8l-108 56.8l20.9-120.2l-87.4-84.8l120.5-17.7l53.9-109.1l54 109.1l120.5 17.7l-87.4 84.8z"/>
</svg>

<h3>Stroke but no stroke-width: falls back to stroke-width:1</h3>

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 475.075 475.075" fill="#FFF">
<path id="path1" stroke="#000" d="M475.1 186.6c0-7.1-5.3-11.4-16-13.2l-143.3-20.8l-64.3-129.9c-3.6-7.8-8.3-11.7-14-11.7s-10.3 3.9-14 11.7l-64.2 129.9l-143.3 20.8c-10.7 1.7-16 6.1-16 13.2c0 4 2.4 8.5 7.1 13.7l104 101l-24.6 142.8c-0.4 2.7-0.6 4.6-0.6 5.7c0 4 1 7.4 3 10.1s5 4.2 9 4.2c3.5 0 7.3-1.2 11.4-3.5l128.2-67.3l128.2 67.3c4 2.3 7.8 3.5 11.4 3.5c7.9 0 11.8-4.8 11.8-14.3c0-2.5-0.1-4.4-0.3-5.7l-24.6-142.8l103.7-101c4.9-5 7.4-9.5 7.4-13.7zm-150.5 101.9l20.6 120.2l-107.6-56.8l-108 56.8l20.9-120.2l-87.4-84.8l120.5-17.7l53.9-109.1l54 109.1l120.5 17.7l-87.4 84.8z"/>
</svg>

<h3>Stroke and stroke-width:0 - no visible stroke applied</h3>

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 475.075 475.075" fill="#FFF">
<path id="path2" stroke="#000" stroke-width="0" d="M475.1 186.6c0-7.1-5.3-11.4-16-13.2l-143.3-20.8l-64.3-129.9c-3.6-7.8-8.3-11.7-14-11.7s-10.3 3.9-14 11.7l-64.2 129.9l-143.3 20.8c-10.7 1.7-16 6.1-16 13.2c0 4 2.4 8.5 7.1 13.7l104 101l-24.6 142.8c-0.4 2.7-0.6 4.6-0.6 5.7c0 4 1 7.4 3 10.1s5 4.2 9 4.2c3.5 0 7.3-1.2 11.4-3.5l128.2-67.3l128.2 67.3c4 2.3 7.8 3.5 11.4 3.5c7.9 0 11.8-4.8 11.8-14.3c0-2.5-0.1-4.4-0.3-5.7l-24.6-142.8l103.7-101c4.9-5 7.4-9.5 7.4-13.7zm-150.5 101.9l20.6 120.2l-107.6-56.8l-108 56.8l20.9-120.2l-87.4-84.8l120.5-17.7l53.9-109.1l54 109.1l120.5 17.7l-87.4 84.8z"/>
</svg>

Upvotes: 1

oware
oware

Reputation: 706

if your svg has the style attribute that includes the stroke it will not work, you have to remove the style attribute to make the css stroke-width property to work, example, my svg was:

<path class="st0" d="..." id="path_tdr" style="stroke-width:0.810537" />

I removed the style attribute from the svg and it worked perfectly

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 123995

You need to set a stroke in order for stroke-width to have an effect. stroke="black" for instance. 

<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF">
<path stroke="black" stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/>
</svg>

Upvotes: 90

Related Questions