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를 사용하면 안됩니다. 대신 animate를 사용하십시오. animateColor는 향후 제공되지 않을 예정이며 향후 SVG 사양에서 제거 될 수 있으며 animate는 제대로 작동합니다. –

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

고마워요 로버트! –

SVG 이미지 변경 색상

답변

관련 문제