Question

我目前正在试验CSS中的SVG路径。我目前有两个独立的SVG路径，在悬停CSS时会改变SVG路径。

＆＃13;

.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");
}

＆＃13;

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

＆＃13;

问题

现在我希望将DIV元素用于＆＃34;测试＆＃34;当在悬停目标上并更改两个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>

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

1 个答案: