首页 > 解决方案 > 我可以在 HTML 文件中使用 css 自定义属性吗?

问题描述

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

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

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

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

标签: htmlcsscustom-properties

解决方案


如果您导入定义属性的 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>


推荐阅读