Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

SVG stroke-width not working

Tags:

css

svg

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

like image 492
Alexandr Belov Avatar asked Feb 28 '17 18:02

Alexandr Belov

People also ask

How do I change the stroke-width in SVG?

You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.

What is stroke-width in SVG?

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. You can use this attribute with the following SVG elements: <altGlyph> <circle> <ellipse>

1 Answers

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>
like image 175
Robert Longson Avatar answered Oct 04 '22 03:10

Robert Longson
Sign in to Comment

Related questions

What is &::before, &::after in CSS? [closed]
Change scrollbar height
Border color on default input style
How to select element that contains only the class of "foobar", don't select if it contains any other classes?
Center and bottom-align flex items
CSS: How can I get rid of the default window "padding"? An element set to 100% width doesn't reach the window's borders
Using a custom (ttf) font in CSS
Can I apply a :hover pseudo selector with the LESS css markup?
Box-shadow trimmed in CSS columns in Chrome
Bootstrap twitter 3.0 and knockoutjs validation
How to change width of a Sidenav in Angular Material Design?
CSS Double Border with outer border thicker than inner border
How do browsers resolve conflicting classes?
Background-size: cover suddenly stopped working in Google Chrome?
What is <meta charset="utf-8">?
Border and background show up as different colors even when color values are same in CSS
Apply bottom margins in Bootstrap 4 ONLY in xs (smartphone and iphone)
Rounded corners for <input type='text' /> using border-radius.htc for IE
CSS Disabled scrolling
CSS Filter not working in Firefox

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!