How are SVG outlines applied?

19 Replies
Zach
Zachā€¢11mo ago
no svg tag anyway in that pic, when you have stroke-width: 4 for instance is it 2 either side, or 4 on a certain side of the border of the element
Jochem
Jochemā€¢11mo ago
you should talk to one of the mods about that ;D
Zach
Zachā€¢11mo ago
Hey @jochemm could you please add a SVG tag? thanks mate šŸ˜›
Jochem
Jochemā€¢11mo ago
I'll get round to it eventually šŸ˜‰
Zach
Zachā€¢11mo ago
I would but I want to finish this damn connectfour
Jochem
Jochemā€¢11mo ago
there
Zach
Zachā€¢11mo ago
do you know my svg answer tho I still cant figure this shit out
Jochem
Jochemā€¢11mo ago
sorry, no
Zach
Zachā€¢11mo ago
dang gonna keep guessing and fiddling I suspect half half
Jochem
Jochemā€¢11mo ago
have you got a codepen so I can fiddle too? or just the code for the svg
Zach
Zachā€¢11mo ago
oh just any SVG circle, if you put stroke-width on it - does that width add to the width of the svg, or use the width. and does it add around the border or one side
<circle
cx="50"
cy="50"
r="40"
fill={fillColour(slot)}
stroke={strokeColour(slot)}
stroke-width="4"
/>
</svg>
<circle
cx="50"
cy="50"
r="40"
fill={fillColour(slot)}
stroke={strokeColour(slot)}
stroke-width="4"
/>
</svg>
I hate fixing shit I already had working
Jochem
Jochemā€¢11mo ago
I think it's both. I made a second circle and offset it 5px, then increased the stroke width to 5 and you can see less of the other circle but it still shows. You have to increase to 6 to get it to stop showing up
Jochem
Jochemā€¢11mo ago
(the important part being the exact center left)
Zach
Zachā€¢11mo ago
legend alright yea I did suspect I am shit at math though
Jochem
Jochemā€¢11mo ago
in fact it's definite. I set the stroke to the same as the radius, and the circle is clearly bigger but the center is still visible
Zach
Zachā€¢11mo ago
oh yea why did I not think of that well, its midnight but still ty Jochem
Zach
Zachā€¢11mo ago
now math time
Jochem
Jochemā€¢11mo ago
np šŸ™‚ ah yes, math time, my favorite /s
Zach
Zachā€¢11mo ago
omg done I changed a * to a / boom was doin opposites oh no can't animate a single SVG component well, transofrm onto the next problem lmfao