for some reason paint-order is not working on chrome but https://caniuse.com/?search=paint-order
27 Replies
it works on mdn's example
so for me it works on firefox but not on google chrome
so the code goes like this
on firefox it goes 1 look and on google another
i am not doing anything fancy just 3 lines and paint-order is not working on google for me
paint-order - CSS: Cascading Style Sheets | MDN
The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.
does the example works for you in chrome?
u mean the result/
?
yeah
well it shows same thing but it could be the default i dunno cant edit the code
that is what i see
does it have to be an svg?
Have you tried moving the paint-order property up above the stroke and fill lines?
i mean fill and stroke properties are for svg's aren't they?
it was working on firefox for text
as i showed u above
this was not on svg
i had a feeling you are not using svg
well what's the issue if i don't ? like why would firefox not mind but google breaks
different browsers different engines they do what they want to do
honestly this is the first time i learned about this property 🙂
lol XD
well i need it to work somehow
issue is i technically found a way to make it work but not on chrome
which is needed so i think i need to make an svg now and see if same properties work
is there a way to make the height responsive also what is the x and y position based on here? parent container or other?
Well a 14px stroke width will just about do what you are looking at. It will almost entirely overwrite everything.
yes but not when i use the property i posted it should reorder how paint works
you don't have to specify width and height on svg
if i dont put height and width it is doingthis
He isn't doing SVG.
right now i am doing svg ( what do you mean ) in the example he was using svg
Try
-webkit-text-stroke-width: 4px; instead of 14px
Why you using text properties like text-align: center; then?
Well I gotta run. Good luck.the whole issue is the stoke should take from around the text not from within it so that is why i used paint property which makes it do as i want it
anw good luck