Can I use a css custom property inside an HTML file?

Question

Is it possible to use a css custom property within an HTML tag for an inline svg element?

Say I have an inline svg element:

<svg style="width:var(--image-width);" />

Now, this statement isn't valid, but is there a way to use --image-width in the HTML file instead of the css file?

Yes it appears to work for colors. But if I define --image-width:70; in the css file, the custom property does not work. A color does work though, like: --my-color: rgb(10,80,60,0.5) — Mr No
– Mr No, Commented Sep 28, 2020 at 3:39
It appears to work for just about any custom property other than width. — Mr No
– Mr No, Commented Sep 28, 2020 at 3:47
If you set the display property of the svg to inline it won't work, you could set it to inline-block to make it work. — mclaus
– mclaus, Commented Sep 28, 2020 at 3:50

mclaus · Accepted Answer · 2020-09-28 03:55:27Z

2

It should work if you import a css file that defines the property --image-width.

/* style.css */
:root {
    --image-width: 42px;
}

<!-- Your html file -->
<link rel="stylesheet" href="style.css">
<svg style="width: var(--image-width);">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

edited Sep 28, 2020 at 3:55

answered Sep 28, 2020 at 3:30

mclaus

1271 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I use a css custom property inside an HTML file?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related