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

Question

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

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

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

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

Answer 1

如果您导入定义属性的 css 文件，它应该可以工作--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>