如何在同一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>