是否可以在 SVG 中使用 CSS 變數來操縱元素的“屬性樣式”中的半徑或位置等值？
例如，在下面的代碼中，我添加了一個 CSS 顏色變數 ---dark-text-clr和一個半徑變數--radius。當我在填充中使用顏色 CSS 變數時，它可以很好地呈現 - 第一個圓圈，但使用半徑變數不會呈現元素 - 第二個圓圈。
: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>uj5u.com熱心網友回復：
設定半徑值的三種方式
- 作為屬性
<circle ... r=10>
- 通過類和樣式表
circle {
r: 10px;
}
- 內嵌在 'style' 屬性中
<circle... style="r: 10px;" ></circle>
最后一種方式具有優先權。看一下這個例子，其中所有圓元素都設定了 r 屬性，它被樣式表（第二個圓）覆寫，再次被行內樣式屬性（第三個圓）覆寫
（這三種方式不必一起使用，但組合起來只是為了證明哪個具有更高的存在并覆寫已經設定的值）
:root {
--dark-text-clr: purple;
--radius: 20px;
}
.circle {
r: 10px;
}<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 300 300">
<circle cx="10" cy="10" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5></circle>
<circle cx="30" cy="30" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5 class="circle"></circle>
<circle cx="60" cy="60" fill="var(--dark-text-clr)" mask="url(#moon-mask)" r=5 class="circle" style="r: var(--radius);" ></circle>
</svg>使用屬性上的變數設定 r 似乎在 firefox 中有效，但在 chrome/edge 中無效
<circle ... r="var(--radius);" ></circle>
所以最好將它設定在 style 屬性上
<circle ... style="r: var(--radius);" ></circle>
uj5u.com熱心網友回復：
是的，但 CSS必須有非零值的單位。
: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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343499.html
上一篇：在下拉串列中選擇多個值