在SVG动画中更改对象/形状的颜色

时间:2014-03-02 08:29:11

标签: css svg webkit inkscape

SVG动画 - http://shrineweb.in/other-files/clients/proxymis/cloudDrizzleSun.svg

我想改变目前黑色的水滴颜色。

我该怎么做?

以下是SVG的代码:

<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"
   id="cloudDrizzleSun"
   class="climacon climacon_cloudDrizzleSun"
   x="0px"
   y="0px"
   viewBox="15 15 70 70"
   enable-background="new 15 15 70 70"
   xml:space="preserve"
   inkscape:version="0.48.4 r9939"
   width="100%"
   height="100%"
   sodipodi:docname="cloudDrizzleSun.svg"><metadata
   id="metadata7959"><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="defs7957" /><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="1138"
   id="namedview7955"
   showgrid="false"
   inkscape:zoom="19.189899"
   inkscape:cx="31.052451"
   inkscape:cy="43.388"
   inkscape:window-x="-8"
   inkscape:window-y="-8"
   inkscape:window-maximized="1"
   inkscape:current-layer="g7939" />
    <style
   type="text/css"
   id="style7904">

        svg{
            shape-rendering: geometricPrecision
        }

        g, path, circle, rect{

            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

            -moz-animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
            -o-animation-timing-function: linear;
            animation-timing-function: linear;

            -webkit-animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            animation-duration: 12s;

            -webkit-animation-direction: normal;
            -moz-animation-direction: normal;
            -o-animation-direction: normal;
            animation-direction: normal;

        }

        .climacon_component-stroke_drizzle {
            fill-opacity: 0;

            -webkit-animation-name: drizzleFall, fillOpacity2;
            -moz-animation-name: drizzleFall, fillOpacity2;
            -o-animation-name: drizzleFall, fillOpacity2;
            animation-name: drizzleFall, fillOpacity2;

            -webkit-animation-timing-function: ease-in;
            -moz-animation-timing-function: ease-in;
            -o-animation-timing-function: ease-in;
            animation-timing-function: ease-in;

            -webkit-animation-duration: 1s;
            -moz-animation-duration: 1s;
            -o-animation-duration: 1s;
            animation-duration: 1s;

        }

        .climacon_component-stroke_drizzle:nth-child(1) {
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            -o-animation-delay: 0s;
            animation-delay: 0s;
        }

        .climacon_component-stroke_drizzle:nth-child(2) {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            -o-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }

        .climacon_component-stroke_drizzle:nth-child(3) {
            -webkit-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            -o-animation-delay: 1.2s;
            animation-delay: 1.2s;
        }

       .climacon_componentWrap-sun_cloud {

            -webkit-animation-name: behindCloudMove, rotate;
            -moz-animation-name: behindCloudMove, rotate;
            -o-animation-name: behindCloudMove, rotate;
            animation-name: behindCloudMove, rotate;

            -webkit-animation-iteration-count: 1, infinite;
            -moz-animation-iteration-count: 1, infinite;
            -o-animation-iteration-count: 1, infinite;
            animation-iteration-count: 1, infinite;

            -webkit-animation-timing-function: ease-out, linear;
            -moz-animation-timing-function: ease-out, linear;
            -o-animation-timing-function: ease-out, linear;
            animation-timing-function: ease-out, linear;

            -webkit-animation-delay: 0, 3s;
            -moz-animation-delay: 0, 3s;
            -o-animation-delay: 0, 3s;
            animation-delay: 0, 3s;

            -webkit-animation-duration: 3s, 12s;
            -moz-animation-duration: 3s, 12s;
            -o-animation-duration: 3s, 12s;
            animation-duration: 3s, 12s;

        }

        .climacon_component-stroke_sunSpoke {
            fill-opacity: 0;
            -webkit-animation-name: fillOpacity, scale;
            -moz-animation-name: fillOpacity, scale;
            -o-animation-name: fillOpacity, scale;
            animation-name: fillOpacity, scale;

            -webkit-animation-direction: alternate;
            -moz-animation-direction: alternate;
            -o-animation-direction: alternate;
            animation-direction: alternate;

            -webkit-animation-iteration-count: 1, infinite;
            -moz-animation-iteration-count: 1, infinite;
            -o-animation-iteration-count: 1, infinite;
            animation-iteration-count: 1, infinite;

            -webkit-animation-delay: 3s, 0;
            -moz-animation-delay: 3s, 0;
            -o-animation-delay: 3s, 0;
            animation-delay: 3s, 0;

            -webkit-animation-duration: 3s;
            -moz-animation-duration: 3s;
            -o-animation-duration: 3s;
            animation-duration: 3s;

            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            -o-animation-fill-mode: both;
            animation-fill-mode: both;

        }

        .climacon_component-stroke_sunSpoke:nth-child(even) {
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;

        }

        @-webkit-keyframes drizzleFall {
          0% {
            -webkit-transform: translateY(0);
          }

          100% {
            -webkit-transform: translateY(21px);
          }
        }

        @-moz-keyframes drizzleFall {
          0% {
            -moz-transform: translateY(0);
          }

          100% {
            -moz-transform: translateY(21px);
          }
        }        

        @-o-keyframes drizzleFall {
          0% {
            -o-transform: translateY(0);
          }

          100% {
            -o-transform: translateY(21px);
          }
        }       

        @keyframes drizzleFall {
          0% {
            transform: translateY(0);
          }

          100% {
            transform: translateY(21px);
          }
        }

        @-webkit-keyframes fillOpacity2 {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }
        }

        @-moz-keyframes fillOpacity2 {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }
        }

        @-o-keyframes fillOpacity2 {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }
        }

        @keyframes fillOpacity2 {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }
        }


        @-webkit-keyframes rotate{
            0%{
                -webkit-transform: rotate(0);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }   
        }


        @-moz-keyframes rotate{
            0%{
                -moz-transform: rotate(0);
            }
            100%{
                -moz-transform: rotate(360deg);
            }   
        }


        @-o-keyframes rotate{
            0%{
                -o-transform: rotate(0);
            }
            100%{
                -o-transform: rotate(360deg);
            }   
        }

        @keyframes rotate{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }   
        }

        @-webkit-keyframes scale{
            0%{
                -webkit-transform: scale(1,1)
            }
            100%{
                -webkit-transform: scale(.5,.5)
            }   
        }

        @-moz-keyframes scale{
            0%{
                -moz-transform: scale(1,1)
            }
            100%{
                -moz-transform: scale(.5,.5)
            }   
        }

        @-o-keyframes scale{
            0%{
                -o-transform: scale(1,1)
            }
            100%{
                -o-transform: scale(.5,.5)
            }   
        }

        @keyframes scale{
            0%{
                transform: scale(1,1)
            }
            100%{
                transform: scale(.5,.5)
            }   
        }

        @-webkit-keyframes behindCloudMove {
          0% {
            -webkit-transform: translateX(-1.75px) translateY(1.75px);
          }

          100% {
            -webkit-transform: translateX(0) translateY(0);
          }
        }

        @-moz-keyframes behindCloudMove {
          0% {
            -moz-transform: translateX(-1.75px) translateY(1.75px);
          }

          100% {
            -moz-transform: translateX(0) translateY(0);
          }
        }


        @-o-keyframes behindCloudMove {
          0% {
            -o-transform: translateX(-1.75px) translateY(1.75px);
          }

          100% {
            -o-transform: translateX(0) translateY(0);
          }
        }

        @keyframes behindCloudMove {
          0% {
            transform: translateX(-1.75px) translateY(1.75px);
          }

          100% {
            transform: translateX(0) translateY(0);
          }
        }

        @-webkit-keyframes fillOpacity {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          100% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }
        }

        @-moz-keyframes fillOpacity {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          100% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }
        }

        @-o-keyframes fillOpacity {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          100% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }
        }

        @keyframes fillOpacity {
          0% {
            fill-opacity: 0;
            stroke-opacity: 0;
          }

          100% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }
        }

    </style>
    <clipPath
   id="cloudFillClip">
        <path
   d="M15,15v70h70V15H15z M59.943,61.639c-3.02,0-12.381,0-15.999,0c-6.626,0-11.998-5.371-11.998-11.998c0-6.627,5.372-11.999,11.998-11.999c5.691,0,10.434,3.974,11.665,9.29c1.252-0.81,2.733-1.291,4.334-1.291c4.418,0,8,3.582,8,8C67.943,58.057,64.361,61.639,59.943,61.639z"
   id="path7907" />
    </clipPath>
    <clipPath
   id="sunCloudFillClip">
        <path
   d="M15,15v70h70V15H15z M57.945,49.641c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C65.943,46.059,62.362,49.641,57.945,49.641z"
   id="path7910" />
    </clipPath>
    <clipPath
   id="cloudSunFillClip">
        <path
   d="M15,15v70h20.947V63.481c-4.778-2.767-8-7.922-8-13.84c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12c0,5.262-3.394,9.723-8.107,11.341V85H85V15H15z"
   id="path7913" />
    </clipPath>
    <g
   class="climacon_iconWrap climacon_iconWrap-cloudDrizzleSun"
   id="g7915">
        <g
   clip-path="url(#cloudSunFillClip)"
   id="g7917">
            <g
   class="climacon_componentWrap climacon_componentWrap-sun climacon_componentWrap-sun_cloud"
   id="g7919">
                <g
   class="climacon_componentWrap climacon_componentWrap_sunSpoke"
   id="g7921">
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"
   id="path7923" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M72.174,30.3c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L72.174,30.3z"
   id="path7925" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"
   id="path7927" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M43.892,30.3l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C45.939,31.081,44.673,31.081,43.892,30.3z"
   id="path7929" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"
   id="path7931" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M43.892,52.925c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L43.892,52.925z"
   id="path7933" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"
   id="path7935" />
                    <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
   d="M72.174,52.925l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C70.125,52.144,71.391,52.144,72.174,52.925z"
   id="path7937" />
                </g>
                <g
   class="climacon_componentWrap climacon_componentWrap-sunBody"
   clip-path="url(#sunCloudFillClip)"
   id="g7939">
                    <circle
   class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody"
   cx="58.033"
   cy="41.612"
   r="11.999"
   id="circle7941"
   style="fill:#ffe680;fill-opacity:1" />
                </g>
            </g>
        </g>
        <g
   class="climacon_componentWrap climacon_componentWrap-drizzle"
   id="g7943">
            <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-left"
   d="M42.001,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2.001-0.895-2.001-2v-3.998C40,54.538,40.896,53.644,42.001,53.644z"
   id="path7945" />
            <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-middle"
   d="M49.999,53.644c1.104,0,2,0.896,2,2v4c0,1.104-0.896,2-2,2s-1.998-0.896-1.998-2v-4C48.001,54.54,48.896,53.644,49.999,53.644z"
   id="path7947" />
            <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-right"
   d="M57.999,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2-0.895-2-2v-3.998C55.999,54.538,56.894,53.644,57.999,53.644z"
   id="path7949" />
        </g>

        <g
   class="climacon_componentWrap climacon_componentWrap-cloud"
   clip-path="url(#cloudFillClip)"
   id="g7951"
   style="fill:#3abbd6;fill-opacity:1">
            <path
   class="climacon_component climacon_component-stroke climacon_component-stroke_cloud"
   d="M63.999,64.944v-4.381c2.387-1.386,3.998-3.961,3.998-6.92c0-4.418-3.58-8-7.998-8c-1.603,0-3.084,0.481-4.334,1.291c-1.232-5.316-5.973-9.29-11.664-9.29c-6.628,0-11.999,5.372-11.999,12c0,3.549,1.55,6.729,3.998,8.926v4.914c-4.776-2.769-7.998-7.922-7.998-13.84c0-8.836,7.162-15.999,15.999-15.999c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.336-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12C71.997,58.864,68.655,63.296,63.999,64.944z"
   id="path7953"
   style="fill:#3abbd6;fill-opacity:1" />
        </g>
    </g>
</svg>

1 个答案:

答案 0 :(得分:1)

答案

查看带有类

的3个路径标记
climacon_component climacon_component-stroke climacon_component-stroke_drizzle

在最底层。

添加

style="fill:red;"

style="fill:#3643D1;"(或任何其他)。

我是如何找到的

我已尝试过每个path元素。