我正在嘗試defs根據封閉的 CSS 類更改 multi-element 的顏色。到目前為止，我的成功率為零。我開始使用 a symbol，然后將其更改為defs帶有 a 的 a g。
我已經整理了一個示例 codepen：在 a 中尋址一個類defs右邊的正方形應該是頂部的綠色和底部的黃色。
.rect1 { fill: red; }
.rect2 { fill: yellow; }
.morph .rect1 { fill: green; }
rect { stroke: black; }
svg { background-color: lightblue; }<svg viewBox="0 0 100 100">
<defs>
<g id="house-def">
<rect class="rect1" x="10" y="10" width="20" height="10" />
<rect class="rect2" x="10" y="20" width="20" height="10" />
</g>
</defs>
<use xlink:href="#house-def" />
<use xlink:href="#house-def" class="morph" transform="translate(30)" />
</svg>這甚至可能嗎？
謝謝你的幫助。
uj5u.com熱心網友回復：
與其嘗試改變 rect1 的顏色，不如改變使用元素的填充：
use{ fill: red; }/*will fill red both use elements*/
.rect2 { fill: yellow; }/*will fill yellow the .rect2 inside defs*/
.morph { fill: green; }/*will fill green the second use element overwritting the fill:red from the first roule.*/
rect { stroke: black; }
svg { background-color: lightblue; }<svg viewBox="0 0 100 100">
<defs>
<g id="house-def">
<rect class="rect1" x="10" y="10" width="20" height="10" />
<rect class="rect2" x="10" y="20" width="20" height="10" />
</g>
</defs>
<use class="a" xlink:href="#house-def" />
<use xlink:href="#house-def" class="morph" transform="translate(30)" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455845.html
上一篇：附加svg解決了這個問題
下一篇：SVG圖示不加載