如何突出一組內部SVG元素（g）

Question

我需要實現的概念是突出顯示瞬間的各種元素。通過強調我的意思是改變一些方面，如顏色。

我有幾個SVG元素裏面的g（組）元素。每個內部元素都有自己的CSS樣式（顏色，邊框等），我想保留它們。我想強調一個特定事件的整體元素，然後將其恢復到原始狀態。

我可以通過存儲它們的原始狀態，對它們中的每一個應用一些樣式變化，然後從原始樣式恢復，但似乎並不那麼直接和優雅來實現上述。

我在想什麼，有一些篩選選項，我可以適用於容器元素的g。這將允許應用過濾器，然後將其刪除，所有內部元素將顯示恢復正常。元素

比如我有：

<g> 
    <rect x="0" y="0" rx="5" width="100" height="60" style="stroke: green; stroke-width: 2; fill: yellow;"> 
    <rect x="20" y="20" rx="5" width="10" height="10" style="stroke: green; stroke-width: 2; fill: yellow;"> 
</g> 

Answer 1

我建議使用CSS這一點。你可以刪除style屬性並介紹一些明智的類/ IDS（我沒加類這個簡單的例子）：

<svg> 
    <style type="text/css"> 
    g:hover rect:first-child { 
     fill:red; stroke:blue; 
    } 

    g:hover rect { 
     fill:green; 
    } 

    rect { 
     stroke: green; 
     stroke-width: 2; 
     fill: yellow; 
    } 

    </style> 
    <g> 
    <rect x="0" y="0" rx="5" width="100" height="60"/> 
    <rect x="20" y="20" rx="5" width="10" height="10"/> 
    </g> 
</svg> 

Try on jsFiddle