我可以在HTML文件中使用css自定义属性吗

Question

是否可以在内联svg元素的HTML标记中使用css自定义属性？

假设我有一个内联svg元素：

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

现在，这个语句是无效的，但是有没有办法在HTML文件中使用--image width而不是css文件？

Answer 1

如果导入一个定义属性--image-width的css文件，它应该会起作用。

/* 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>