Question

我在html文件中使用SVG代码以动画某些元素。我成功地设定了特定路径的动画。但是我想现在使用一条路径使另一条路径平滑地改变其不透明度。我希望第二条路径充当弹出窗口，当页面加载时为0不透明度，然后当我将鼠标悬停在另一个元素上时进入1。例如，第一个元素的id是Layer_11，第二个元素的id是bridgesandroadsgrades，它是一个带文本的框。目前在我的CSS中，我有 #bridgesandroadsgrades {display: none } 使其加载而不可见。

我已经使用CSS悬停了Layer_11更改颜色。我可以使用我用于其他动画的javascript，这样我就可以使用你可以为我建议的任何脚本。我将需要任何代码，例如我需要对html进行的任何更改。我已经尝试了很多代码，无法使用任何代码。我已经在html中添加了一个类，因为到目前为止我所阅读的大部分内容都是建议这个或创建一个div。

滚动的

元素是

<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元素+元素选择器。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在同一个SVG中使用SVG的一个元素来改变另一个元素的不透明度？

2 个答案: