主页 / 问题 / 728576
Accepted
YourDeveloper
Asked:2020-10-09 22:48:07 +0000 UTC2020-10-09 22:48:07 +0000 UTC

如何将动画添加到svg？

  • 772

我这里问了一个关于这个图的问题，但是怎么把这个动画全部加到css中，比如给个class，那么就会有动画。我想做到这一点，例如，当单击一个按钮时，数字会被平滑地覆盖。

svg text {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  font-size: 70px;
  fill: url(#fendTestGrad);
}

#fendTestGrad .start {
  stop-color: #c2c5cc;
}
#fendTestGrad .end {
  stop-color: #8f98a1;
}

svg {
background: linear-gradient(135deg, rgba(73,85,97,1) 0%, rgba(74,88,101,1) 100%);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
  <defs>
    <linearGradient id="fendTestGrad" x1="52%" y1="52%" x2="48%" y2="48%">
        <animate 
          attributeName="x1" 
          from="0" to=".52"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="y1" 
          from="0" to=".52"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="x2" 
          from="0" to=".48"         
          dur="3s" 
          repeatCount="1">          
        </animate>
        <animate 
          attributeName="y2" 
          from="0" to=".48"         
          dur="3s" 
          repeatCount="1">          
        </animate>
      
      <stop class="start"></stop>
      <stop class="start"></stop>
      <stop class="end"></stop>
    </linearGradient>
  </defs>
  <text x="50%" y="70">60</text>
</svg>

jquery

2 个回答

  1. 试试这样

    svg{transition: .3s;}
button:focus svg{твой бекграунд; }
    • 0
  2. Best Answer

    您需要使用属性begin。例如，此代码在单击此对象时启动动画：

    <animate ... begin = "click" >

    问题是<linearGradient>它不是可以点击的对象。当您单击文本时，不是单击元素<text>，也不是<linearGradient>. 因此，您需要设置<text>一些id：

    <text id="textid" x="50%" y="70">60</text>

    然后安排<animate>如下：

    <animate ... begin = "textid.click" >

    工作代码： 

    svg text {
  font-family: sans-serif;
  text-anchor: middle;
  font-weight: bold;
  font-size: 70px;
  fill: url(#fendTestGrad);
}

#fendTestGrad .start {
  stop-color: #c2c5cc;
}
#fendTestGrad .end {
  stop-color: #8f98a1;
}

svg {
background: linear-gradient(135deg, rgba(73,85,97,1) 0%, rgba(74,88,101,1) 100%);
}
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
  <defs>
    <linearGradient id="fendTestGrad" x1="52%" y1="52%" x2="48%" y2="48%">
        <animate 
          attributeName="x1" 
          from="0" to=".52"         
          dur="3s" begin="textid.click"
          >          
        </animate>
        <animate 
          attributeName="y1" 
          from="0" to=".52"         
          dur="3s" begin="textid.click"
         >          
        </animate>
        <animate 
          attributeName="x2" 
          from="0" to=".48"         
          dur="3s" begin="textid.click"
         >          
        </animate>
        <animate 
          attributeName="y2" 
          from="0" to=".48"         
          dur="3s" begin="textid.click"
          >          
        </animate>
      
      <stop class="start"></stop>
      <stop class="start"></stop>
      <stop class="end"></stop>
    </linearGradient>
  </defs>
  <text id="textid" x="50%" y="70">60</text>
</svg>

    • 0

相关问题