在悬停时更改两个单独的 SVG 路径

Question

我目前正在尝试使用 CSS 中的 SVG 路径。我目前有 2 个单独的 SVG 路径，悬停时 CSS 会更改 SVG 路径。

.container {
  width: 80%;
  padding-top: 60px;
  margin: 20px auto;
}

.test{
  width: 100px;
  height: 100px;
  margin: 20px 20px;
  background-color: red;
}

.st0{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:12;}

svg path {
  transition: d:0.8s;
  -webkit-transition: d 0.8s;
}


#l2:hover {
  transition: d 0.8s;
  -webkit-transition: d 0.8s;
  d: path("M0,6.9c52.4,10.3,181,2.9,290.1,0");
}
#l1:hover {
  transition: d 0.8s;
  -webkit-transition: d 0.8s;
  d: path("M0,6.9c53.1-9.8,184.8,4,290.1,0");
}

  <div class="container">

    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" viewBox="0 0 290.1 13.8" style="enable-background:new 0 0 290.1 13.8;" xml:space="preserve">
    <path id="l1" class="st0" d="M0,6.9c98.8,0,191.3,0,290.1,0"/>
    </svg>

    <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" viewBox="0 0 290.1 13.8" style="enable-background:new 0 0 290.1 13.8;" xml:space="preserve">
    <path id='l2'  class="st0" d="M0,6.9c98.8,0,191.3,0,290.1,0"/>
    </svg>
    <div class="test">

    </div>
  </div>

问题

现在我希望将 DIV 元素与“test”类一起使用，当悬停目标时，它会更改两个 SVG 路径。这可以在 CSS 上做到这一点吗？如果是这样，我如何让 DIV 定位并更改悬停时的 SVG 路径？

非常感谢

路易

Answer 1

您可以使用 flexbox 和 order property 来使用 ~ selector（或 + selector）并保持相同的视觉效果。您还可以在同一个 svg 中创建两个路径，以便轻松定位它们：

.container {
  width: 80%;
  padding-top: 60px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}

.test {
  width: 100px;
  height: 100px;
  margin: 20px 20px;
  background-color: red;
  order: 1;
}

.st0 {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 12;
}

svg path {
  transition: d:0.8s;
  -webkit-transition: d 0.8s;
}

.test:hover~svg #l2 {
  d: path("M0,6.9c52.4,10.3,181,2.9,290.1,0");
}

.test:hover~svg #l1 {
  d: path("M0,6.9c53.1-9.8,184.8,4,290.1,0");
}

<div class="container">
  <div class="test">

  </div>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 290.1 33.8" style="enable-background:new 0 0 290.1 13.8;" xml:space="preserve">
    <path id="l1" class="st0" d="M0,6.9c98.8,0,191.3,0,290.1,0"/>
    <path id='l2' transform="translate(0,20)" class="st0" d="M0,6.9c98.8,0,191.3,0,290.1,0"/>
    </svg>

</div>