java - SVG 图像改变颜色

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>