Svg Stroke-Width Not Working

SVG stroke-width not working

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>

How do I get SVG stroke thickness to work?

Probably because the drawing is only using fill, no stroke?

Also, careful, your SVG does not have a viewBox defined.

stroke css property is not working in my svg

Your circle is not an actual circle, this shape is a hollowed circle and the stroke you see is actually the fill, which cannot be animated using stroke-dashoffset.

<path d="M45,77A32,32,0,1,1,77,45,32.036,32.036,0,0,1,45,77Zm0-62A30,30,0,1,0,75,45,30.034,30.034,0,0,0,45,15Z" id="circle"/>

You should use a real circle shape and then be able to animate its stroke-dashoffset like this:

<circle r="25" cx="45" cy="45" id="circle"/>

* {
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.container svg {
    width: 50%;
}

#circle {
    fill: none;
    stroke: red;
    stroke-width: 2;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: animating 3s ease-out both;
}

@keyframes animating{
    to {
        stroke-dashoffset: 0;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 90 112.5" x="0px" y="0px">
            <!--<path d="M45,77A32,32,0,1,1,77,45,32.036,32.036,0,0,1,45,77Zm0-62A30,30,0,1,0,75,45,30.034,30.034,0,0,0,45,15Z" id="circle"/>-->
            <!-- Use a real circle -->
            <circle r="25" cx="45" cy="45" id="circle"/>
            <path d="M40.5,53.5a1,1,0,0,1-.707-.293l-6-6a1,1,0,0,1,1.414-1.414L40.5,51.086,53.793,37.793a1,1,0,0,1,1.414,1.414l-14,14A1,1,0,0,1,40.5,53.5Z" class="mark"/>
        </svg>
    </div>
</body>
</html>

SVG stroke issue

I assume you used Google Chrome or similar Blink- or Webkit-based browser to test this SVG image. Opening the page in Mozilla Firefox or Microsoft Edge does not display the very thin border you pointed out, so it is an issue with your browser and not your code. I suggest sending a bug report to Google about this issue.

In the meantime, to fix this issue for all browsers including Chrome, consider using the SVG <clipPath> element and apply it to all of the shapes except for the white triangle. Then, in the CSS remove the border-radius property in the svg selector.

<svg viewBox="0 0 32 32">
  <defs>
    <clipPath id="circle-viewport">
      <circle r="16" cx="16" cy="16" />
    </clipPath>
  </defs>
  <circle
    r="16"
    cx="16"
    cy="16"
    class="circle--progress"
    stroke-dasharray="100 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <circle
    r="16"
    cx="16"
    cy="16"
    fill="none"
    stroke="#3FC364"
    stroke-dasharray="100 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <circle
    r="16"
    cx="16"
    cy="16"
    fill="none"
    stroke="#EDBB40"
    stroke-dasharray="66 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <circle
    r="16"
    cx="16"
    cy="16"
    fill="none"
    stroke="#FF8832"
    stroke-dasharray="33 100"
    clip-path="url(#circle-viewport)"
  ></circle>
  <path d="M16 16 L100 50 L200 -50 Z" fill="white"></path>
</svg>

SVG fill / stroke

All you have to do to change the wheel fill colour is add a second rule targetting the wheels.

Note: The SVG below is exactly the same as your original one. Except that I have reformatted it a little, and added a viewBox so that we can scale it up to see the wheels. I wanted to show that you can style the SVG how you want without having to change the SVG.

svg {
  /* just here to make the svg large enough to see the wheel centres */
  width: 200px;
  height: 200px;
}

svg:hover path {
  stroke: #40bfff;
}

/* Target the first path (the wheels) */
svg:hover path:nth-child(1) {
  fill: #40bfff;
}

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z"
    fill="#9098B1" stroke="#9098B1"
    stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375"
    stroke="#9098B1"
    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Svg Stroke-Width Not Working