htmlcsscustom-properties

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

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?

Solution

  • 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>