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

【问题标题】：How do I use one element of an SVG to change the opacity of another, in the same SVG?如何在同一个 SVG 中使用 SVG 的一个元素来更改另一个元素的不透明度？
【发布时间】：2016-02-16 21:30:20
【问题描述】：

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

我已经让 Layer_11 使用 CSS 悬停改变颜色。我可以使用用于其他动画的 javascript，因此我可以使用您可以为我建议的任何脚本。我将需要任何代码，例如我需要对 html 进行的任何更改。我已经尝试了许多代码，但无法正常工作。我已经在 html 中添加了一个类，因为到目前为止我读过的大部分内容要么建议这样做，要么创建一个 div。

翻转元素是

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

目标是

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

我还希望当鼠标不再悬停在 Layer_11 上时元素淡出

【问题讨论】：

标签： javascript jquery html css svg

【解决方案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>

【讨论】：

对我来说唯一简单的就是你太棒了。太感谢了。你不知道我浪费了多少时间来研究这个。 :)
谢谢。你其实太善良了:) YW

【解决方案2】：

使用 CSS element+element Selector 可以轻松实现。

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

【讨论】：