如何在同一SVG中使用SVG的一個元素更改另一個元素的不透明度？

Question

我正在html文件中使用SVG代碼以設置某些元素的動畫。 我已經成功設置了一條特定的路徑。 但是，我現在想使用一條路徑來使另一條路徑平滑地更改其不透明度。 我希望第二條路徑像彈出窗口一樣，在頁面加載時處於0透明度，然后在將鼠標懸停在另一個元素上時進入1。 例如，第一個元素的id是Layer_11，第二個元素的id是bridgesandroadsgrades，它是一個帶有文本的框。 當前在我的CSS中，我有#bridgesandroadsgrades {display: none }使其加載而不會被看到。

我已經有使用CSS懸停的Layer_11更改顏色。 我可以使用用於其他動畫的javascript，因此可以使用您可以為我建議的任何腳本。 我將需要任何代碼，例如需要對html進行的任何更改。 我已經嘗試了許多代碼，但無法使用。 自從到目前為止我讀過的很多書都建議這樣做或創建一個div以來，我已經在html中添加了一個類。

翻轉的元素是

<g id="Layer_11" class="bridge1">

目標是

<g id="bridgesandroadsgrades"  class="roadsgrades">

我也希望當鼠標不再懸停在Layer_11上時該元素淡出

Answer 1

這真的很簡單。 您所要做的就是將mouseover和mouseout事件添加到第一個元素，並更改另一個元素的不透明度。

使不透明性“順利更改”的最簡單方法是更改​​其他元素的類並使用CSS transition 。

 var Layer11 = document.getElementById("Layer_11"); Layer11.addEventListener("mouseover", function(evt) { var otherElement = document.getElementById("bridgesandroadsgrades"); otherElement.setAttribute("class", "roadsgrades-on"); }); Layer11.addEventListener("mouseout", function(evt) { var otherElement = document.getElementById("bridgesandroadsgrades"); otherElement.setAttribute("class", "roadsgrades-off"); }); 

 .roadsgrades-off { opacity: 0; transition: opacity 0.5s; } .roadsgrades-on { opacity: 1; transition: opacity 0.5s; } 

 <svg> <g id="Layer_11" class="bridge1"> <circle cx="75" cy="75" r="50"/> </g> <g id="bridgesandroadsgrades" class="roadsgrades-off"> <circle cx="225" cy="75" r="50"/> </g> </svg> 

Answer 2

CSS元素+元素選擇器完全可以實現。

 .bridge-2 { opacity: 0; transition: opacity 0.5s; } .bridge-1:hover + .bridge-2 { opacity: 1; } 

 <svg> <g class="bridge-1"> <circle cx="75" cy="75" r="50" /> </g> <g class="bridge-2"> <circle cx="225" cy="75" r="50" /> </g> </svg>