是否可以在 SVG 中使用 CSS 变量来操作“中的半径或位置”等值属性样式“一个元素？
例如，在下面的代码中，我添加了一个 CSS 颜色变量 ---dark-text-clr和一个半径变量--radius。当我使用填充中的颜色 CSS 变量 https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables它渲染得很好 - 第一个圆，但使用半径变量不会渲染元素 - 第二个圆。
:root{
--dark-text-clr: blue;
--radius: 12;
}
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
<circle cx="9" cy="9" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=9 ></circle>
<circle cx="36" cy="20" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r="var(--radius)" ></circle>
</svg>
是的，但是CSSmust有单位 https://www.w3.org/TR/css-values-4/#length-value对于非零值。
:root{
--dark-text-clr: blue;
--radius: 12px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
<circle cx="9" cy="9" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=9 ></circle>
<circle cx="36" cy="20" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r="var(--radius)" ></circle>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
