Question

我要做什么：

使用<use>元素复制图标，并在将特定类添加到<use>元素时，以两种不同的颜色为图标着色。

图标：

<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        id="red5" x="0px" y="0px" viewBox="0 0 48.1 50.8">
  <style type="text/css">
    .st0{
      fill:#D73647;
      stroke:#000000;
      stroke-miterlimit:10;
     }

    /* use.active .color-a{
      fill: green;
    }
    use.active .color-b{
      fill: blue;
    }*/ // Not working...
  </style>
  <g>
    <path class="st0 color-a" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
    </path>
    <path class="st0 color-b" d="M45.8,30.6L36.3,30.6C36.3,30.6 35.6,39.9 25.8,39.6C25.8,39.6 19.6,39.7 15.8,34.8L21.8,28.4L0.5,28.4L0.5,48.1L7.7,41.7C7.7,41.7 12,50.3 24.5,50.2C24.5,50.3 43.3,51 45.8,30.6z">
    </path>
  </g>
</symbol>

使用元素：

<use id="svg_16" 
     xlink:href="#red5" transform="matrix(0.6730555893894703,0,0,0.7071457914654147,-239.09557391490307,-165.87702520953462) " 
     y="269.9999919533732" 
     x="473.99998587369964" 
     class="default-state" 
     fill="black"></use>

当<use>的类从“默认状态”更改为“活动”时，我希望箭头的颜色发生变化（每个箭头都变为自己的颜色）。

到目前为止，我已经尝试过：

我了解到，为了使paths的颜色从<use>元素更改，我必须将其CSS类更改为：

.st0{
  fill: inherit; // <- changed
  stroke: #000000;
  stroke-miterlimit: 10;
}

以及颜色分类：

use.active {
  fill: green;
}

但是当我将<use>的类别设置为“ active”时，它们都将获得相同的颜色...

我想对动画做同样的事情。

我想念什么？我该如何实现？

Answer 1

这就是我要这样做的方式：我将创建一个符号，并重复使用同一条路径的两次：一次原样，一次旋转180度。对于“默认”状态，请删除active元素的g类。

.st0{
      stroke-miterlimit:10;
     }

     .active .color-a{
      fill: green;
    }
     .active .color-b{
      fill: blue;
    }

svg{width:90vh;border:1px solid}

<svg viewBox="0 0 140 150" >
<symbol id="a" viewBox="0 0 48.1 50.8">
    <path class="st0 color-a" id="k" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
    </path>
  </symbol>

<g class="active" id="svg_16"  > 
  <use  class="color-a"
     xlink:href="#a"> 
</use>
  <use class="color-b" transform="rotate(180 70 75)"
     xlink:href="#a"> </use>
</g>
</svg>

SVG-继承多种颜色/动画

1 个答案: