Question

我在youtube上观看了一个关于svg动画的视频教程，我跟着它一切都运行得很好。但是我需要动画的图像没有中风，它有一个填充。

有人可以帮我解决这个问题吗？这是我用于描边的代码。

    <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 88.3 113.1" style="enable-background:new 0 0 88.3 113.1;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#F8B318;}
  .st1{fill:none;stroke:#CD689A;stroke-miterlimit:10;}
  .st2{fill:none;}
  <animaateTransform attributeName="transform"
        repeatCount="indefinite"; />
    </style>

    <defs>
        <style>
        .st1{
            stroke-dasharray: 800;
            stroke-dasoffset: 0;
            -webkit-animation: dash 3s linear forwards;
            -moz-animation: dash 3s linear forwards;
            -o-animation: dash 3s linear forwards;
            animation: dash 3s linear forwards;
            repeatCount="indefinite";
        }

        @-webkit-keyframes dash {
            from {
                stroke-dashoffset: 800;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
    </defs>

    <g>
      <g>
        <path class="st0" d="M76,12.2c0-3.9-3.2-7.1-7.1-7.1c-2.2,0-4.1,1-5.4,2.6c-0.1,0.1-0.3,0.2-0.4,0.3L50.4,21.4
      C49,22.9,47,23.6,45,23.3l-34.2-5.8c-1.9-0.3-3.8,0.3-5.2,1.6c-3.8,3.7-2.4,8.5,2.6,10.2L26,35.1c2.2,0.7,9,2.9,9,2.9
      s-5.1,5.4-6.5,6.9l-8.9,9.6c-1.3,1.4-3.3,2.1-5.2,1.9l-7.4-1l-1.1-0.1c-4.2,2.2-3.5,8.4,1,9.7l1,0.3l7.6,2.2
      c0.6,0.2,1.7,0.5,1.7,0.5s1.2-0.3,1.8-0.5l9.8-3c0.5-0.2,1.5-0.5,1.5-0.5s0.8-0.7,1.1-1.1L74.2,17c1.4-1.4,1.8-2.9,1.8-4.4
      C76,12.5,76,12.4,76,12.2z M35.5,49.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5S38,45.6,38,47C38,48.4,36.9,49.5,35.5,49.5z
       M42.3,42.5c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5S43.7,42.5,42.3,42.5z M48.9,35.6
      c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5C51.4,34.4,50.2,35.6,48.9,35.6z M55.2,28.7
      c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5C57.7,27.6,56.6,28.7,55.2,28.7z"/>
  </g>
  <g>
    <path class="st1" d="M77.3,49.6c-5.5-4.6-12.2-7.1-20.7-7.4L44.7,54.9h9.8c11,0,16.6,5.3,16.6,15.7v22.1c0,1.7-1.4,3.1-3.1,3.1
      H29.4c-2.7,0-4.9-2.2-4.9-4.9V76.4L12.7,89.1v9.8c0,5.6,4.9,10,11.2,10H77l0-0.1c5.1-0.4,9.2-4.7,9.2-10V69.4
      C86.1,61.1,83.2,54.6,77.3,49.6z"/>
  </g>
</g>
<line id="_x3C_Slice_x3E__1_" class="st2" x1="-98.6" y1="-14.5" x2="187.5" y2="-14.5"/>
    </svg>

Answer 1

以下是背景动画示例：http://jsfiddle.net/pLh05ypL/1/

<svg width="320" height="320" viewBox="0 0 320 320">
    <path
        fill="#FFFFFF" stroke="#000"
        d="M160,100 Q200,100,200,300 Q100,300,100,200 Z">
        <animate
            attributeType="XML"
            attributeName="fill"
            values="#800;#f00;#800;#800"
            dur="0.8s"
            repeatCount="indefinite"/>
        </path>
</svg>

希望它会对你有所帮助。

如果我想在svg中填充颜色而不是笔划怎么办？

1 个答案: