我正在用d3 javascript制作一個可視化程式。
有一個大的線組。所有的線都應該以0.1的不透明度開始。在這個大組中，有一些小組。當一個事件被觸發時，其中一個小群組是可見的，所有其他小群組是不可見的。哪一個小群組是可見的取決于觸發事件。我想通過設定不透明度屬性使其中一個小群組可見，其他所有小群組不可見。
那么，是否有任何關鍵字可以使組覆寫其父級的屬性或樣式？或者是否有任何其他類似的屬性或樣式可以被重寫？否則我可能不得不使用for回圈來遍歷和修改每一個小的組，這不是很有效率。
<svg width="1000"/span> height="500"/span>>
< g class="big_group" style="opacity: 0;">
<g class='small_group inherit_opacity'/span>>/span>
< line x1="100" y1="100" x2="200" y2="200" style=" stroke: black;"></line>>
</g>/span>
<g class='small_group inherit_opacity'>/span>
< line x1="200"/span> y1="100"/span> x2="200" y2="200" style=" stroke: black;"></line>>
</g>/span>
< g class='small_group' id='try_to_override_opacity_but_fail' style="opacity: 1;">
< line x1="300"/span> y1="200"/span> x2="200" y2="200" style=" stroke: black;"></line>>
</g>/span>
</g>/span>
</svg>
我直覺上認為在 "try_to_override_opacity_but_fail "中可能有某種 "override "關鍵字，以覆寫父組中的不透明度。
uj5u.com熱心網友回復：
只有當你用CSS定義初始不透明度，而不是用style屬性來定義的時候：
< svg viewBox="0 0 1000 500">
<style>
g{
opacity:0。
行程:黑色。
stroke-width:10;
}
</style>
<g>/span>
< line x1="100"/span> y1="100"/span> x2="200"/span> y2="200"/span>> </line>>
</g>/span>
<g>/span>
< line x1="200"/span> y1="100"/span> x2="200"/span> y2="200"/span>> </line>>
</g>/span>
<g style="opacity:1;">
< line x1="300"/span> y1="200"/span> x2="200"/span> y2="200"/span>> </line>>
</g>/span>
</svg>/span>uj5u.com熱心網友回復：
.svg檔案與css配合得很好。 所以你可以像這樣設計它們的樣式：
svg {
width: 200px;
& > g {
path:nth-last-of-type(2) {
opacity: 0;
}
}
如果你需要動態地進行修改，應該閱讀關于通過javascript樣式元素的內容；)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/320097.html
標籤：
上一篇：為什么在試圖訪問一個基礎模板類的受保護成員時，會出現訪問錯誤？
下一篇：SVG縮放和viewBox