Question

我是SVG的新手，我需要制作一个SVG，在1秒内将颜色从白色变为红色，再保持红色再持续2秒。我知道如何在1秒内更改颜色但我找不到任何方法在重新启动之前将颜色设置为红色。

这是我的形象。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!-- The icon can be used freely in both personal and commercial projects with no attribution       required, but always appreciated. 
  You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->

<svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  version="1.1"
  x="0px"
  y="0px"
  width="512px"
  height="512px"
  viewBox="0 0 512 512"
  enable-background="new 0 0 512 512"
  xml:space="preserve"
  id="svg2"
  inkscape:version="0.48.4 r9939"
  sodipodi:docname="alarm_animate.svg"><metadata
  id="metadata10"><rdf:RDF><cc:Work
   rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
     rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
  id="defs8" /><sodipodi:namedview
  pagecolor="#ffffff"
  bordercolor="#666666"
  borderopacity="1"
  objecttolerance="10"
  gridtolerance="10"
  guidetolerance="10"
  inkscape:pageopacity="0"
  inkscape:pageshadow="2"
  inkscape:window-width="1920"
  inkscape:window-height="1024"
  id="namedview6"
  showgrid="false"
  inkscape:zoom="1.84375"
  inkscape:cx="178.41033"
  inkscape:cy="264.79565"
  inkscape:window-x="-4"
  inkscape:window-y="-4"
  inkscape:window-maximized="1"
  inkscape:current-layer="svg2" />


  <animateColor
     id="a1"
     attributeName="fill"
     from="#FFFFFF"
     to="#FF0000"
     dur="1s"
     repeatCount="indefinite" />

  <path
     id="warning-6-icon"
     d="m 237.939,231.352 36.121,0 0,97.421 -36.121,0 z M 256,381.019 c -9.574,0 -19.334,-9.761       -19.334,-19.334 0,-9.574 9.76,-19.335 19.334,-19.335 9.573,0 19.334,9.761 19.334,19.335 0,9.573       -9.761,19.334 -19.334,19.334 z M 256,74.07 46,438.873 l 420,0 z m 0,88 132.718,230.803 -265.436,0 z"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cccccssssscccccccc" />

  </svg>

有什么建议吗？

Answer 1

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!-- The icon can be used freely in both personal and commercial projects with no attribution       required, but always appreciated. 
  You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->

<svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  version="1.1"
  x="0px"
  y="0px"
  width="512px"
  height="512px"
  viewBox="0 0 512 512"
  enable-background="new 0 0 512 512"
  xml:space="preserve"
  id="svg2"
  inkscape:version="0.48.4 r9939"
  sodipodi:docname="alarm_animate.svg"><metadata
  id="metadata10"><rdf:RDF><cc:Work
   rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
     rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
  id="defs8" /><sodipodi:namedview
  pagecolor="#ffffff"
  bordercolor="#666666"
  borderopacity="1"
  objecttolerance="10"
  gridtolerance="10"
  guidetolerance="10"
  inkscape:pageopacity="0"
  inkscape:pageshadow="2"
  inkscape:window-width="1920"
  inkscape:window-height="1024"
  id="namedview6"
  showgrid="false"
  inkscape:zoom="1.84375"
  inkscape:cx="178.41033"
  inkscape:cy="264.79565"
  inkscape:window-x="-4"
  inkscape:window-y="-4"
  inkscape:window-maximized="1"
  inkscape:current-layer="svg2" />


  <animate
     id="a1"
     attributeName="fill"
     from="#FFFFFF"
     to="#FF0000"
     dur="1s"
     begin="0s; a2.end" />

  <animate
     id="a2"
     attributeName="fill"
     from="#FF0000"
     to="#FF0000"
     dur="2s"
     begin="a1.end"
     fill="freeze" />

  <path
     id="warning-6-icon"
     d="m 237.939,231.352 36.121,0 0,97.421 -36.121,0 z M 256,381.019 c -9.574,0 -19.334,-9.761       -19.334,-19.334 0,-9.574 9.76,-19.335 19.334,-19.335 

9.573,0 19.334,9.761 19.334,19.335 0,9.573       -9.761,19.334 -19.334,19.334 z M 256,74.07 46,438.873 l 420,0 z m 0,88 132.718,230.803 -265.436,0 z"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cccccssssscccccccc" />

  </svg>

SVG图像改变颜色

1 个答案: