在悬停时更改两个单独的 SVG 路径 [英] Change two separate SVG paths on hover

问题描述

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

.container {宽度:80%；填充顶部:60px；边距:20px 自动；}.测试{宽度:100px；高度:100px；边距:20px 20px；背景颜色:红色；}.st0{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:12;}svg 路径 {过渡:d:0.8s；-webkit-transition: d 0.8s;}#l2:悬停{过渡:d 0.8s；-webkit-transition: d 0.8s;d: 路径("M0,6.9c52.4,10.3,181,2.9,290.1,0");}#l1:悬停{过渡:d 0.8s；-webkit-transition: d 0.8s;d: 路径("M0,6.9c53.1-9.8,184.8,4,290.1,0");}

 
<?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="保留"><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="保留"><path id='l2' class="st0" d="M0,6.9c98.8,0,191.3,0,290.1,0"/></svg><div class="test">

问题

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

非常感谢

路易斯

解决方案

你可以使用 flexbox 和 order 属性 能够使用 ~ 选择器(或 + 选择器)并保持相同的视觉效果.您还可以在同一个 svg 中创建两个路径，以便您可以轻松定位它们:

.container {宽度:80%；填充顶部:60px；边距:20px 自动；显示:弹性；弹性方向:列；}.测试 {宽度:100px；高度:100px；边距:20px 20px；背景颜色:红色；订单:1；}.st0 {填充:#FFFFFF；中风:#000000；笔画宽度:2；行程限制:12；}svg 路径 {过渡:d:0.8s；-webkit-transition: d 0.8s;}.test:hover~svg #l2 {d: 路径("M0,6.9c52.4,10.3,181,2.9,290.1,0");}.test:hover~svg #l1 {d: 路径("M0,6.9c53.1-9.8,184.8,4,290.1,0");}

<div class="test">
<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="保留"><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>

I am currently experimenting with SVG paths in CSS. I currently have 2 separate SVG paths that on hover the CSS changes the SVG path.

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

QUESTION

Now I am looking to use the DIV element with the class "test" that when on hover targets and changes both the SVG paths. Is this possible to do this on CSS? If so how do I get the DIV to target and change both the SVG paths on hover?

Many Thanks

Louis

解决方案

You can use flexbox and the order property to be able to use the ~ selector (or the + selector) and to keep the same visual. You can also make both path inside the same svg so you can target them easily:

.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 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！