How are SVG outlines applied?

19 Replies

ZachOP•2y 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•2y ago

you should talk to one of the mods about that ;D

ZachOP•2y ago

Hey @jochemm could you please add a SVG tag? thanks mate 😛

Jochem•2y ago

I'll get round to it eventually 😉

ZachOP•2y ago

I would but I want to finish this damn connectfour

Jochem•2y ago

there

ZachOP•2y ago

do you know my svg answer tho I still cant figure this shit out

Jochem•2y ago

sorry, no

ZachOP•2y ago

dang gonna keep guessing and fiddling I suspect half half

Jochem•2y ago

have you got a codepen so I can fiddle too? or just the code for the svg

ZachOP•2y 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•2y 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•2y ago

(the important part being the exact center left)

ZachOP•2y ago

legend alright yea I did suspect I am shit at math though

Jochem•2y 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

ZachOP•2y ago

oh yea why did I not think of that well, its midnight but still ty Jochem

ZachOP•2y ago

now math time

Jochem•2y ago

np 🙂 ah yes, math time, my favorite /s

ZachOP•2y 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

Gaming

Programming

How are SVG outlines applied?