SVG圖像變化顏色

我是SVG的新手，我需要製作一個SVG，它在1秒內將其顏色從白色變爲紅色，並且保持紅色持續2秒。我知道如何改變顏色1秒，但我找不到任何方法設置重新啓動前的顏色紅色。SVG圖像變化顏色

這是我的形象。

<?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>

有什麼建議嗎？

來源

2013-02-14 Matteo Gatto

這並不回答你的問題，但你不應該使用animateColor，而是使用動畫。 animateColor已被棄用，並可能在未來的SVG規範中被移除，動畫作品也是如此。 – 2013-02-14 14:03:04

<?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>

來源

2013-02-14 14:12:32

非常感謝Robert！ – 2013-02-14 14:15:42

SVG圖像變化顏色

回答

相關問題