我試圖使用CSS樣式的fill特定的<path>內<symbol>。我已經分配fill:inherit了符號中的路徑，<defs>我可以<use>在 SVG DOM 中查詢符號的實體，但我似乎無法在這些實體中訪問該路徑。我查看inherit了 CSS 和currentColor填充，<path>但沒有運氣。任何幫助表示贊賞。
<svg>
<defs>
<style>
symbol#DateCard path.purple {
fill:inherit;
}
use[*|href="#DateCard"] path.purple{
fill:#ff0095;
transition:fill .6s;
}
use[*|href="#DateCard"] path.purple:hover{
path:#ff0000;
}
</style>
<symbol id="DateCard">
<path class="purple" fill="currentColor" d="..."/>
</symbol>
</defs>
<use xlink:href="#DateCard"/>
<svg>
我可以查詢符號內的路徑，但是當我查詢<use>實體內的特定路徑時，這將回傳一個空的 NodeList：
document.querySelectorAll('use[*|href="#DateCard"] path.purple')
uj5u.com熱心網友回復：
shadow DOM 內部的樣式需要在 shadow DOM 內部完成。
我從使用 CSS 樣式化 SVG 內容中學到的東西| Codrops是 CSS 變數在這種情況下非常有用。因此，在這里我創建了不同的樣式設定方式：使用符號內部的 style 屬性和樣式元素以及來自符號“外部”的 CSS 變數。
.card1 {
--path1-color: #0099CC;
--path2-color: #FFDF34;
}
.card2 {
--path1-color: #00008B;
--path2-color: #FF8C00;
}
.card2:hover {
--path1-color: #00BFFF;
}<svg viewBox="0 0 200 100" width="400">
<defs>
<symbol id="DateCard">
<style>
.path2 {
fill: var(--path2-color);
transition: fill 1s;
}
.path2:hover {
fill: #800000;
}
</style>
<path class="path1" style="fill: var(--path1-color);transition: fill .6s;" d="M20 40 a 20 20 0 1 1 1 0"/>
<path class="path2" d="M40 60 a 20 20 0 1 1 1 0"/>
</symbol>
</defs>
<use href="#DateCard" class="card1"/>
<use href="#DateCard" class="card2" transform="translate(80 0)"/>
<svg>更新
OP詢問是否可以使用SVG中的屬性來實作懸停效果。:hover 偽類的替代方法是由滑鼠進入和離開影片元素開始的影片。不幸的是，它不如 CSS 靈活 - 很難設定樣式<animate>。
以下是<path>為符號中的第二個設定影片的示例：
.card1 {
--path1-color: #0099CC;
--path2-color: #FFDF34;
}
.card2 {
--path1-color: #00008B;
--path2-color: #FF8C00;
}
.card2:hover {
--path1-color: #00BFFF;
}<svg viewBox="0 0 200 100" width="400">
<defs>
<symbol id="DateCard">
<style>
.path2 {
fill: var(--path2-color);
}
</style>
<path class="path1" style="fill: var(--path1-color);transition: fill .6s;" d="M20 40 a 20 20 0 1 1 1 0"/>
<path class="path2" d="M40 60 a 20 20 0 1 1 1 0">
<animate attributeName="fill" dur="1s" values="#FF8C00;#800000" begin="mouseenter" fill="freeze" />
<animate attributeName="fill" dur="1s" from="#800000" to="#FF8C00" begin="mouseleave" fill="freeze" />
</path>
</symbol>
</defs>
<use href="#DateCard" class="card1"/>
<use href="#DateCard" class="card2" transform="translate(80 0)"/>
<svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312424.html