Animated svg in web browser - animating the color

Post about projects that use Inkscape for web design.
Nonemoticoner
Posts: 8
Joined: Sat Dec 18, 2010 8:12 pm

Animated svg in web browser - animating the color

Postby Nonemoticoner » Sun Mar 18, 2012 6:43 am

Hello community! I hope you're able to help me this time...

So, the point is that I wanted to make animated svg for my website. At this moment I need only something what would be changing its color. I tried many things I found in internet but I couldn't do it alone. Transforming simple circles (generated in notepad) is not a trouble but I wanted to transform full svg file generated from Inkscape.

Here's an example file I wish to transform:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<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:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="369.67358"
   height="536.4165"
   id="svg3031">
  <defs
     id="defs3033">
    <linearGradient
       id="linearGradient3859">
      <stop
         id="stop3861"
         style="stop-color:#782121;stop-opacity:1"
         offset="0" />
      <stop
         id="stop3863"
         style="stop-color:#782121;stop-opacity:0"
         offset="1" />
    </linearGradient>
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3865"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3867"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3869"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3871"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3873"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3875"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3877"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3879"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3881"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3883"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3885"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3887"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
    <radialGradient
       cx="453.32745"
       cy="459.35303"
       r="174.83679"
       fx="453.32745"
       fy="459.35303"
       id="radialGradient3889"
       xlink:href="#linearGradient3859"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,1.4768531,0,-219.04392)" />
  </defs>
  <metadata
     id="metadata3036">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-268.49065,-191.14476)"
     id="layer1">
    <g
       id="g3069"
       style="fill:url(#radialGradient3865);fill-opacity:1;stroke:none">
      <path
         d="m 442.37939,204.1401 c -1.80037,1.09362 -3.74636,1.97735 -5.40111,3.28086 -15.69132,12.36057 -32.65059,32.06575 -43.48379,48.77643 -2.92663,4.51445 -5.36631,9.32655 -8.04946,13.98983 -1.94093,5.01913 -4.33763,9.88504 -5.82278,15.05738 -5.85538,20.3927 -4.14755,42.21578 2.49782,62.14818 1.65593,4.96686 3.87547,9.72768 5.81321,14.59152 2.54707,4.73652 4.92594,9.56741 7.64122,14.20955 8.43939,14.42832 18.19434,28.13257 27.25352,42.16815 6.3209,9.79311 12.41741,19.72923 18.62672,29.59347 12.00301,21.54372 24.29184,43.09422 33.00003,66.24571 5.83061,15.50121 6.41759,19.64125 10.47079,35.58302 6.30656,29.8477 6.83007,61.25496 0.58152,91.20998 -1.10237,5.2847 -2.76108,10.4379 -4.14163,15.65685 -4.51891,14.9578 -11.1829,30.14142 -24.00516,39.91095 -5.98013,4.55638 -10.14758,5.67652 -17.05231,8.44705 -18.28105,5.48721 -37.50715,6.74495 -56.36007,9.24481 -8.82782,1.14736 -4.66447,0.50246 -12.49946,1.87295 0,0 -27.72104,-3.87359 -27.72104,-3.87359 l 0,0 c 8.02627,-1.55542 3.77142,-0.86526 12.77902,-1.97928 18.84561,-2.44852 37.97852,-3.81179 56.40758,-8.58818 6.20909,-2.23198 11.42744,-3.64285 16.93569,-7.42207 13.05173,-8.95482 19.95986,-23.75833 24.5921,-38.32681 1.42842,-5.12367 3.15077,-10.17435 4.28525,-15.37102 6.45815,-29.58248 5.75721,-60.61507 -0.50162,-90.11615 -4.00318,-15.71616 -4.60614,-19.91699 -10.39185,-35.18872 -8.72152,-23.02097 -21.09385,-44.41591 -33.13351,-65.80145 -4.26755,-6.78667 -14.31906,-22.82208 -18.66471,-29.52968 -9.12798,-14.08921 -18.9421,-27.86645 -27.34053,-42.41654 -2.73816,-4.7438 -5.1325,-9.67792 -7.69874,-14.51688 -1.93787,-4.96602 -4.16022,-9.83022 -5.81359,-14.89806 -8.5956,-26.34701 -7.9866,-53.90945 3.38712,-79.31199 2.71826,-4.75372 5.18973,-9.65734 8.1548,-14.26117 6.45211,-10.01813 13.69518,-18.75587 21.50916,-27.72621 3.98599,-4.57587 15.77302,-17.54569 20.9512,-22.16686 1.54502,-1.37882 3.42749,-2.32491 5.14123,-3.48737 0,0 28.05338,2.99534 28.05338,2.99534 z"
         id="path3039"
         style="fill:url(#radialGradient3867);fill-opacity:1;stroke:none" />
      <path
         d="m 313.59159,331.65037 c 9.90965,15.51335 21.40575,29.89058 32.59379,44.47634 11.64232,13.06669 23.92604,25.71374 37.34917,36.97962 8.2611,6.93345 16.9498,13.34091 25.40392,20.03765 26.048,20.12837 53.36904,38.54534 79.37533,58.71322 16.51179,11.61531 32.53191,24.10364 47.0293,38.19305 8.00834,7.78298 12.18069,12.77374 19.57311,21.08425 17.73519,21.80527 29.36692,46.70459 37.56908,73.38978 5.99779,19.79972 5.06758,37.3161 -0.58108,56.9028 -4.19847,12.04585 -11.92751,22.50269 -21.38733,30.94802 -4.65361,3.71212 -2.25705,1.98651 -7.18294,5.18618 0,0 -27.98691,-2.88278 -27.98691,-2.88278 l 0,0 c 4.95531,-2.78028 2.5453,-1.20522 7.20933,-4.75669 9.63859,-7.48691 17.23797,-17.92409 21.59301,-29.3001 5.86836,-18.99232 6.70952,-35.96323 1.05338,-55.28719 -8.02794,-26.36578 -19.62721,-50.86409 -37.3409,-72.22504 -19.81072,-22.11733 -41.70054,-42.10616 -66.34787,-58.79779 -26.09018,-20.0545 -53.3232,-38.57943 -79.33768,-58.74516 -0.81444,-0.64018 -24.48108,-19.22666 -25.63114,-20.19372 -13.55677,-11.39957 -26.06526,-24.1164 -37.7064,-37.44177 -11.40779,-14.5975 -22.7258,-29.24093 -33.35995,-44.41958 0,0 28.11278,-1.86109 28.11278,-1.86109 z"
         id="path3041"
         style="fill:url(#radialGradient3869);fill-opacity:1;stroke:none" />
      <path
         d="m 474.80531,297.98635 c 1.28067,5.27333 1.24474,9.32734 -2.40337,13.53951 -0.93508,1.07967 -2.18991,1.84786 -3.14705,2.90801 -3.41293,3.78026 -3.38976,4.6214 -5.74408,9.37668 -0.72234,2.2641 -1.59343,4.48602 -2.16703,6.7923 -1.81071,7.2803 -1.92967,11.18977 -2.9088,18.7616 -1.53474,11.86841 -3.45964,23.55158 -5.83021,35.28008 -6.39457,25.93929 -15.9562,49.40955 -28.56178,72.87791 -5.96043,9.7603 -11.90182,19.6499 -18.99291,28.65574 -5.99565,7.6146 -12.97881,14.41421 -19.71708,21.35411 -7.04174,5.79744 -13.84303,12.21618 -21.60254,17.094 -2.40608,1.51251 -7.61655,4.12316 -10.23193,5.46566 -7.54996,3.53981 -15.60507,5.93781 -23.65475,8.0632 0,0 -27.97308,-3.74431 -27.97308,-3.74431 l 0,0 c 8.09021,-1.82633 16.08505,-4.34443 23.78704,-7.39895 3.40672,-1.70362 6.94454,-3.16178 10.23746,-5.07614 7.87729,-4.57949 14.57003,-11.14586 21.84692,-16.54588 6.74798,-6.83216 13.83772,-13.46114 19.88739,-20.94187 7.16467,-8.85949 13.11132,-18.66805 19.18744,-28.27276 4.55144,-8.41241 7.73602,-13.92639 11.65716,-22.64859 7.14403,-15.89122 12.16822,-32.67213 16.8202,-49.42559 2.34446,-11.65507 4.222,-23.2401 5.61029,-35.05025 0.87236,-7.42121 1.02737,-12.05323 2.62449,-19.26668 0.53946,-2.43649 1.38113,-4.79609 2.0717,-7.19414 1.67698,-3.79757 2.88216,-7.35162 5.60655,-10.56155 0.85842,-1.01141 2.07225,-1.65721 3.08896,-2.50933 4.3393,-3.63685 3.61506,-5.42529 2.26545,-10.91506 0,0 28.24356,-0.6177 28.24356,-0.6177 z"
         id="path3043"
         style="fill:url(#radialGradient3871);fill-opacity:1;stroke:none" />
      <path
         d="m 330.75015,415.58648 c 19.25264,12.32949 40.79615,20.08945 62.41433,27.10203 36.52706,10.1674 74.25366,14.52123 111.94819,17.43411 33.34754,0.0954 -0.99103,0.0932 -3.23513,-0.36869 -2.80473,-0.57732 5.69861,-0.63929 8.50555,-1.20578 5.69266,-1.14887 10.32787,-3.28849 15.09182,-6.4602 5.77384,-4.78959 9.19699,-11.6499 12.67074,-18.16251 0.49086,-1.08269 0.98172,-2.16537 1.47257,-3.24806 0,0 28.17408,1.18051 28.17408,1.18051 l 0,0 c -0.50034,1.14429 -1.00068,2.28858 -1.50102,3.43288 -3.57801,6.87985 -7.16207,14.06095 -12.8398,19.45921 -20.47094,15.68871 -51.08339,8.90536 -74.99845,9.37558 -37.67909,-3.16407 -75.39164,-7.75126 -111.87403,-18.08086 -22.12907,-7.24392 -44.21875,-15.19406 -63.97303,-27.7749 0,0 28.14418,-2.68332 28.14418,-2.68332 z"
         id="path3047"
         style="fill:url(#radialGradient3873);fill-opacity:1;stroke:none" />
      <path
         d="m 360.11924,600.8625 c 8.96754,-4.7259 18.57438,-7.96593 27.4718,-12.86371 8.40999,-4.62948 11.04403,-6.70749 19.06136,-12.16482 17.25595,-13.68095 31.32959,-30.63648 42.40496,-49.57509 7.05112,-13.14733 9.89627,-27.56853 11.0897,-42.2703 -0.0102,-9.96468 -4.07923,-18.44039 -9.81809,-26.32366 -4.17952,-6.95869 -9.38061,-13.10745 -12.77603,-20.51979 -1.22767,-4.17289 -6.72063,-10.01347 -0.46936,-13.07025 1.50257,-0.73474 3.25096,-0.78836 4.87644,-1.18254 11.91551,-0.85525 23.76055,-2.43664 34.92466,-6.94628 7.67951,-3.10208 15.53587,-7.85682 22.67345,-11.85747 25.09422,-14.80058 45.3431,-35.42696 63.90765,-57.56406 9.40293,-11.96058 5.0342,-6.13791 13.17089,-17.41928 0,0 27.49339,1.73516 27.49339,1.73516 l 0,0 c -8.40501,11.39283 -3.91143,5.51835 -13.5384,17.57917 -18.69445,22.32517 -38.94775,43.29261 -64.04853,58.51213 -6.47939,3.80825 -15.31678,9.30612 -22.38995,12.40928 -10.86863,4.7683 -22.56854,7.06664 -34.38505,7.46557 -1.52719,0.15479 -3.04833,0.39058 -4.58157,0.46439 -0.80252,0.0386 -1.63214,-0.34064 -2.40693,-0.12799 -1.3991,0.38401 2.83551,7.52828 2.95971,8.76116 3.4637,7.14819 8.57984,13.25366 12.64463,20.05636 5.72797,8.63437 9.94069,17.63595 9.72062,28.26223 -1.30984,15.1187 -4.35598,29.92569 -11.50083,43.49001 -11.18524,19.29085 -25.452,36.52444 -42.69436,50.76282 -8.96877,6.29075 -17.88227,12.41584 -27.75056,17.24876 -18.53177,9.07578 1.99444,-1.61738 -13.91408,5.97703 -1.39564,0.66625 -2.69243,1.52238 -4.03864,2.28357 0,0 -28.08688,-3.1224 -28.08688,-3.1224 z"
         id="path3051"
         style="fill:url(#radialGradient3875);fill-opacity:1;stroke:none" />
      <path
         d="m 433.92611,426.92979 c 17.04717,10.81754 34.00168,21.77456 51.2563,32.26168 27.94536,18.46346 58.59003,31.99381 89.32538,45.00484 17.37952,6.97919 35.26181,12.51414 53.65644,16.00208 0,0 -27.54758,3.80346 -27.54758,3.80346 l 0,0 c -18.10778,-3.86621 -35.70139,-9.63581 -52.83277,-16.6698 -30.81471,-13.21263 -61.45089,-27.0612 -89.66313,-45.35618 -17.50698,-10.61046 -34.74204,-21.65559 -52.29293,-32.19223 0,0 28.09829,-2.85385 28.09829,-2.85385 z"
         id="path3053"
         style="fill:url(#radialGradient3877);fill-opacity:1;stroke:none" />
      <path
         d="m 449.74072,446.67207 c 5.3724,15.69006 7.51791,31.04088 6.56992,47.56407 -3.88455,21.11272 -17.13462,38.68557 -30.83795,54.59203 -11.15479,12.52855 -23.35149,23.96331 -36.43845,34.42038 -1.29836,0.89678 -2.59671,1.79356 -3.89506,2.69034 0,0 -27.95619,-2.78036 -27.95619,-2.78036 l 0,0 c 1.31429,-0.81313 2.62859,-1.62626 3.94289,-2.4394 13.25801,-10.28628 25.84562,-21.28727 37.05743,-33.84656 13.44123,-15.33367 26.38413,-32.36302 30.42541,-52.79891 0.95836,-15.94273 -1.09437,-31.40724 -7.0439,-46.32896 0,0 28.1759,-1.07263 28.1759,-1.07263 z"
         id="path3055"
         style="fill:url(#radialGradient3879);fill-opacity:1;stroke:none" />
      <path
         d="m 435.57534,458.57772 c -21.9404,8.47798 -43.8626,16.73692 -66.61999,22.75422 -18.7287,4.4997 -37.90832,6.44789 -57.10402,7.42075 -1.90269,0.0593 -3.80539,0.1185 -5.70808,0.17775 0,0 -27.6526,-4.30781 -27.6526,-4.30781 l 0,0 c 1.92491,-0.0379 3.84982,-0.0759 5.77473,-0.11383 19.36634,-0.73932 38.72995,-2.46106 57.67042,-6.75828 11.26038,-2.84505 14.21223,-3.37133 25.34455,-7.08794 13.66576,-4.56241 26.82239,-10.50085 40.37056,-15.38401 0,0 27.92443,3.29915 27.92443,3.29915 z"
         id="path3057"
         style="fill:url(#radialGradient3881);fill-opacity:1;stroke:none" />
      <path
         d="m 425.84375,423.91337 c 15.64025,-7.50673 28.92537,-19.00381 41.3689,-30.90241 11.59119,-11.71191 20.60236,-25.18458 27.57065,-40.03543 0,0 27.89756,1.23129 27.89756,1.23129 l 0,0 c -7.25095,15.26839 -16.18719,28.82413 -28.03183,41.01076 -12.40311,12.10997 -25.66747,23.41407 -40.73885,32.11427 0,0 -28.06643,-3.41848 -28.06643,-3.41848 z"
         id="path3059"
         style="fill:url(#radialGradient3883);fill-opacity:1;stroke:none" />
      <path
         d="m 412.75389,416.56034 c -9.29004,-15.49607 -13.11543,-33.25273 -16.43273,-50.78763 -1.55872,-12.2079 -2.74707,-24.89382 0.063,-37.04178 1.21052,-5.23303 2.58342,-7.7213 4.72834,-12.54315 2.42428,-4.94101 5.65208,-9.40271 8.73431,-13.93821 0,0 28.02152,1.69187 28.02152,1.69187 l 0,0 c -3.07155,4.4024 -6.34101,8.68736 -8.85867,13.44725 -2.0129,4.2494 -3.64646,7.18608 -4.82659,11.8012 -3.01019,11.77183 -1.98068,24.18726 -0.44241,36.0662 3.31295,17.24209 7.20097,34.78914 17.23067,49.55182 0,0 -28.21745,1.75243 -28.21745,1.75243 z"
         id="path3061"
         style="fill:url(#radialGradient3885);fill-opacity:1;stroke:none" />
      <path
         d="m 484.69499,486.03818 c 9.27518,13.91553 18.25285,27.9136 25.97002,42.76446 8.44602,15.25686 15.16706,31.23478 20.58567,47.78187 4.05636,14.44492 6.14219,29.25668 7.58188,44.15462 0.83165,9.6298 0.97948,19.29377 1.04353,28.95268 -0.6267,4.8338 -1.94955,9.46158 -4.14412,13.79452 0,0 -28.21236,-1.4485 -28.21236,-1.4485 l 0,0 c 2.37025,-3.7353 3.38027,-8.00165 4.18765,-12.33883 0.0147,-9.57341 -0.0673,-19.15565 -0.78806,-28.70702 -1.24977,-14.70954 -3.38227,-29.3051 -7.43443,-43.5361 -5.27905,-16.42666 -12.09092,-32.205 -20.44347,-47.32241 -7.77936,-14.81291 -16.74626,-28.84006 -26.49227,-42.43839 0,0 28.14596,-1.6569 28.14596,-1.6569 z"
         id="path3063"
         style="fill:url(#radialGradient3887);fill-opacity:1;stroke:none" />
      <path
         d="m 480.20027,466.34896 c 1.20146,11.62237 1.63061,23.29563 2.00618,34.96726 1.12787,13.95835 -3.0173,26.99739 -8.41022,39.64776 -6.71659,16.32095 -14.34529,32.21261 -22.10849,48.06475 -5.53592,9.66528 -9.43457,20.40976 -15.84748,29.58154 -2.82894,4.04596 -4.77441,5.62012 -8.24116,8.96745 -5.99017,5.92242 -13.1438,10.3156 -20.64201,14.03421 -2.94876,1.21953 -5.8773,2.48427 -8.82609,3.70367 0,0 -28.05087,-3.38492 -28.05087,-3.38492 l 0,0 c 3.005,-1.08696 5.79658,-2.55087 8.85327,-3.49986 7.52062,-3.36033 14.72253,-7.50478 20.76991,-13.15745 3.00118,-2.657 5.87628,-4.94841 8.31746,-8.19004 6.71797,-8.92074 10.50358,-19.75942 16.14501,-29.30637 7.71311,-15.82067 15.20835,-31.63599 21.80655,-47.94709 5.43244,-12.43399 9.38417,-24.64491 8.32118,-38.42879 -0.33185,-11.59013 -0.79045,-23.20233 -2.38168,-34.70032 0,0 28.28844,-0.3518 28.28844,-0.3518 z"
         id="path3065"
         style="fill:url(#radialGradient3889);fill-opacity:1;stroke:none" />
    </g>
  </g>
</svg>


Can anyone tell me how to animate this svg's color to some another? Please, post some ready code. I want to analize it myself.

Regards,
None
Attachments
example.svg
(16.95 KiB) Downloaded 317 times

User avatar
brynn
Posts: 9541
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Animated svg in web browser - animating the color

Postby brynn » Sun Mar 18, 2012 7:37 am

First I should say that I won't be able to give you any code, because I don't know how. But wouldn't you animate a whole image in the same way that you animate one object? Wouldn't you just write the code to animate all the objects? In your example, all the objects use the same gradient, so I would think that would make it easier for a simple color rotation, than if each object had a different color or gradient (or than if you need objects "in motion").

I see that you have all the objects grouped. And a group is technically an object. Wouldn't you just put the group object in place of the circle object in your example?

Nonemoticoner
Posts: 8
Joined: Sat Dec 18, 2010 8:12 pm

Re: Animated svg in web browser - animating the color

Postby Nonemoticoner » Mon Mar 19, 2012 3:04 am

brynn wrote:First I should say that I won't be able to give you any code, because I don't know how. But wouldn't you animate a whole image in the same way that you animate one object? Wouldn't you just write the code to animate all the objects? In your example, all the objects use the same gradient, so I would think that would make it easier for a simple color rotation, than if each object had a different color or gradient (or than if you need objects "in motion").

I see that you have all the objects grouped. And a group is technically an object. Wouldn't you just put the group object in place of the circle object in your example?


Yesterday, I succefully animated svg thanks to help on this website: http://wiki.inkscape.org/wiki/index.php/SVG_Animation But I still have no idea how to animate color. I tried to change variables in the code that is one that website but it didn't work. You should remember that color of my example is defined like here:

Code: Select all

<linearGradient
       id="linearGradient3859">
      <stop
         id="stop3861"
         style="stop-color:#782121;stop-opacity:1"
         offset="0" />
      <stop
         id="stop3863"
         style="stop-color:#782121;stop-opacity:0"
         offset="1" />
    </linearGradient>

So it's not managed alone. It probably makes some troubles.

Btw. I saw that examples with animating colors on W3C are failing, too: http://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatecolor And it's not really cool.

Maybe it will work if I try animate color of a normal filled object instead of gradiental. But if it doesn't work on W3C website, it probably won't work anywhere. :| Something is broken. I hope it will be solved without making a new standard. Anyway, I'll try to troll W3C ass to rush them to work...

cluesome
Posts: 8
Joined: Thu Sep 16, 2010 11:59 pm

Re: Animated svg in web browser - animating the color

Postby cluesome » Tue Mar 20, 2012 9:21 am

Hi Nonemoticoner,

Off the top of my head I think you could achieve the animation of colour, if by that you mean moving from one to another over time, by using the <animate> tag that you would place inside of the group of things you want the colour of to animate. I have done it with opacity to achieve a kind of blinking effect, but colour is just another attribute (fill) and should work the same I would have thought...

<g
id="groupobject"
...
<animate
attributeName="fill"
values="0;1"
keyTimes="0;1"
dur="18"
begin="0"
repeatCount="indefinite"
id="animatecolour" />
<path
id="pathobject"
... />
</g>

This animation cycles over 18s indefinitely. It's possible to skew the progress using ratios in the values and keyTimes attributes. Check out the spec for details as I can't quite remember ottomh how that works.

Hope that helps.

Nonemoticoner
Posts: 8
Joined: Sat Dec 18, 2010 8:12 pm

Re: Animated svg in web browser - animating the color

Postby Nonemoticoner » Wed Mar 21, 2012 4:19 am

Thanks for repling, cluesome.

You say you achived it? Could you post here the whole text with your code included? Or attach the html file (that would be even better idea). I just can't configure it myself. :?

cluesome
Posts: 8
Joined: Thu Sep 16, 2010 11:59 pm

Re: Animated svg in web browser - animating the color

Postby cluesome » Wed Mar 21, 2012 11:54 pm

I worked mine out from reading this and a fair bit of trial and error: http://www.w3.org/TR/SVG/animate.html#AnimateElement

I had a quick go at animating fill but I couldn't get it to work either :p

Good luck.

Jelle
Posts: 78
Joined: Sat Nov 06, 2010 11:25 am

Re: Animated svg in web browser - animating the color

Postby Jelle » Sat Dec 01, 2012 7:19 pm

Hello Nonemoticoner,

As all your colors are individually set per object and taken from the <defs>, you cannot just animate the grouped object. The inheritance goes like <parent> --> <child> only if the child doesn't have a setting yet. As all you children have relations to defined colors in the <defs> you'll have to animate every individual color.

If you use SMIL, please consider that it won't work in MSIE

This is an example for a radialGradient, that you can find on http://srufaculty.sru.edu/david.dailey/ ... ent11c.svg

<radialGradient id="gradient1" cx="60%" cy="60%" r="10%" fx="50%" fy="34%"
spreadMethod="reflect" gradientUnits="userSpaceOnUse">
<animate attributeName="cx" dur="7s" values="10%; 70%; 10%"
repeatCount="indefinite"/>
<animate attributeName="r" dur="9s" values="30%; 5%;0%; 5%;30%"
repeatCount="indefinite"/>
<animate attributeName="fy" dur="3s" values="5%; 75%; 5%"
repeatCount="indefinite"/>
<stop offset="0.0" stop-color="grey"/>
<stop id="OF" offset="0.5" stop-color="white">
</stop>
<stop offset="1" stop-color="black"/>
</radialGradient>


To create one that works on all browser use this example that uses Javascript for the animation.

http://srufaculty.sru.edu/david.dailey/svg/GradRot.svg


On the site of David Dailey you can find tonnes of examples and a universe of fascinating ideas how to use animated SVG

http://srufaculty.sru.edu/david.dailey/svg/

At www.learnsvg.com, you can find a free book on SVG from 2003, that can also teach you how to create animations. However as it was written before browser vendors decided to have SVG add the XML NameSpace declarations to SVG documents these are always missing and need to be added in the <SVG> header. Just use the same header as Inkscape and you'll be fine ;-)


Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 2 guests