I use SVG SMIL animation because I haven't found another way to animate a curved shape. This approach works perfectly for all browsers except for iOS browsers.
This is my SVG code:
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 540 450" style="enable-background:new 0 0 540 450;" xml:space="preserve">
<style type="text/css">
.st0{fill:rgba(115, 203, 232, 0.3);}
</style>
<path id="t" class="st0" d="M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;">
<animate
attributeName="d"
attributeType="XML"
dur="10s"
repeatCount="indefinite"
values="
M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;
M393.620000,413.170000C314.860000,451.100000,219.884470,381.470294,91.370310,296.084829C-59.166688,186.229543,29.222773,79.276069,119.102773,81.566069C208.982773,83.866069,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,431.408010,79.499494,495.938010,159.869494C560.458010,240.249494,566.460000,329.930000,393.620000,413.170000Z;
M374.262300,334.744023C295.502300,372.674023,219.884470,464.784206,91.370310,379.398742C-59.166688,269.543456,86.027714,124.720021,175.907714,127.010021C265.787714,129.310021,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,434.437607,63.594111,498.967607,143.964111C563.487607,224.344111,547.102300,251.504023,374.262300,334.744023Z;
M270,376.835237C191.240000,414.765237,181.548418,328.452349,53.034258,243.066884C-97.502740,133.211598,86.319021,36.861713,176.199021,39.151713C266.079021,41.451713,336.324192,10.071305,405.399674,50.570962C472.843833,113.093459,600.249772,160.249902,501.647635,230.831974C407.113801,294.083100,442.840000,293.595237,270,376.835237Z;
M328.727569,304.241436C302.169852,351.959364,192.967667,434.488238,64.453507,349.102773C-86.083491,239.247487,100.185252,122.506085,163.148450,79.934747C247.318825,36.557748,311.038710,-14.398515,380.114192,26.101142C447.558351,88.623639,604.328075,280.967683,505.725938,351.549755C411.192104,414.800881,411.029233,229.973703,328.727569,304.241436Z;
M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;
"/>
</path>
<path id="t" class="st0" d="M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
values="
M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;
M314.232437,343.451865C235.022437,340.801865,68.622550,431.473244,28.022550,304.423244C-12.567450,177.363244,80.443183,65.747277,145.108413,88.464874C255.317034,138.502506,258.603391,56.904805,315.533391,33.824805C372.463391,10.744805,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,488.062437,349.281865,314.232437,343.451865Z;
M284.310494,403.295750C205.100494,400.645750,119.359757,400.250347,78.759757,273.200347C38.169757,146.140347,137.685161,85.261587,188.039896,57.241977C302.151379,35.727137,344.466357,155.777310,381.882047,136.600173C446.617771,113.520173,551.309427,137.307909,523.686036,212.055507C467.431656,320.627909,458.140494,409.125750,284.310494,403.295750Z;
M283.009540,355.160451C119.237528,330.394232,92.039722,396.347485,51.439722,269.297485C10.849722,142.237485,60.928873,8.505299,120.390286,55.941023C256.617988,143.706323,233.885264,158.379218,288.213356,167.823070C367.259574,178.567875,462.844553,181.540346,435.221162,256.287944C378.966782,364.860346,456.839540,360.990451,283.009540,355.160451Z;
M307.727667,404.596704C149.159471,399.344795,63.418734,479.608543,22.818734,352.558543C-17.771266,225.498543,127.277529,224.463669,173.729402,166.522116C278.734207,50.037633,336.660633,79.021023,361.066782,102.775369C416.695828,196.781232,491.465542,207.559427,485.958369,299.219428C479.140242,367.462255,481.557667,410.426704,307.727667,404.596704Z;
M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;
"/>
</path>
</svg>
I noticed that in Safari and other iOS browsers animation works if the attributeName attribute has a different value, such as fill for example. But I need to work with arrtributeName = 'd' since it is about changing the form.
Please tell me how I can fix this.
You have an extra semicolon at the end of the last paths for the values. You also have extra semicolons at the end of the d attributes
svg{width:300px; border:solid}
<svg viewBox="0 0 540 450" >
<style type="text/css">
.st0{fill:rgba(115, 203, 232, 0.3);}
</style>
<path class="st0" d="M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z">
<animate
attributeType="XML"
attributeName='d'
dur="10s"
repeatCount="indefinite"
values="
M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;
M393.620000,413.170000C314.860000,451.100000,219.884470,381.470294,91.370310,296.084829C-59.166688,186.229543,29.222773,79.276069,119.102773,81.566069C208.982773,83.866069,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,431.408010,79.499494,495.938010,159.869494C560.458010,240.249494,566.460000,329.930000,393.620000,413.170000Z;
M374.262300,334.744023C295.502300,372.674023,219.884470,464.784206,91.370310,379.398742C-59.166688,269.543456,86.027714,124.720021,175.907714,127.010021C265.787714,129.310021,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,434.437607,63.594111,498.967607,143.964111C563.487607,224.344111,547.102300,251.504023,374.262300,334.744023Z;
M270,376.835237C191.240000,414.765237,181.548418,328.452349,53.034258,243.066884C-97.502740,133.211598,86.319021,36.861713,176.199021,39.151713C266.079021,41.451713,336.324192,10.071305,405.399674,50.570962C472.843833,113.093459,600.249772,160.249902,501.647635,230.831974C407.113801,294.083100,442.840000,293.595237,270,376.835237Z;
M328.727569,304.241436C302.169852,351.959364,192.967667,434.488238,64.453507,349.102773C-86.083491,239.247487,100.185252,122.506085,163.148450,79.934747C247.318825,36.557748,311.038710,-14.398515,380.114192,26.101142C447.558351,88.623639,604.328075,280.967683,505.725938,351.549755C411.192104,414.800881,411.029233,229.973703,328.727569,304.241436Z;
M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z"/>
</path>
<path class="st0" d="M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
values="
M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;
M314.232437,343.451865C235.022437,340.801865,68.622550,431.473244,28.022550,304.423244C-12.567450,177.363244,80.443183,65.747277,145.108413,88.464874C255.317034,138.502506,258.603391,56.904805,315.533391,33.824805C372.463391,10.744805,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,488.062437,349.281865,314.232437,343.451865Z;
M284.310494,403.295750C205.100494,400.645750,119.359757,400.250347,78.759757,273.200347C38.169757,146.140347,137.685161,85.261587,188.039896,57.241977C302.151379,35.727137,344.466357,155.777310,381.882047,136.600173C446.617771,113.520173,551.309427,137.307909,523.686036,212.055507C467.431656,320.627909,458.140494,409.125750,284.310494,403.295750Z;
M283.009540,355.160451C119.237528,330.394232,92.039722,396.347485,51.439722,269.297485C10.849722,142.237485,60.928873,8.505299,120.390286,55.941023C256.617988,143.706323,233.885264,158.379218,288.213356,167.823070C367.259574,178.567875,462.844553,181.540346,435.221162,256.287944C378.966782,364.860346,456.839540,360.990451,283.009540,355.160451Z;
M307.727667,404.596704C149.159471,399.344795,63.418734,479.608543,22.818734,352.558543C-17.771266,225.498543,127.277529,224.463669,173.729402,166.522116C278.734207,50.037633,336.660633,79.021023,361.066782,102.775369C416.695828,196.781232,491.465542,207.559427,485.958369,299.219428C479.140242,367.462255,481.557667,410.426704,307.727667,404.596704Z;
M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z"/>
</path>
</svg>
Related
Hi I have an SVG which is 5 arrow shapes stacked. I am wanting to fade in each arrow from the bottom up. When the top arrow has faded in, I want the first one to fade out, then the second etc. And then start the animation again by fading in each arrow.
Here is a code pen of the SVG code:
https://codepen.io/anon/pen/gyJZEy
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect>
<animate id="hg0" begin="0;hg0.end" dur="8s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate id="hg1" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin;hg0.end" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate id="hg2" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+1s;hg0.end+1s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate id="hg3" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+2s;hg0.end+2s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate id="hg4" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+3s;hg0.end+3s" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate id="hg5" attributeName="opacity" values="0;1;0" dur="4s" begin="hg0.begin+4s;hg0.end+4s" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
Here a #keyfrmes + animation-delay version:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<style>
path {
fill: red; opacity: 0;
animation: 5.5s opacity infinite;
}
#keyframes opacity {
15% {opacity: 0}
35% {opacity: 1}
65% {opacity: 1}
85% {opacity: 0}
}
#hg2 {animation-delay: 0.5s}
#hg3 {animation-delay: 1.0s}
#hg4 {animation-delay: 1.5s}
#hg5 {animation-delay: 2.0s}
</style>
<path id="hg1" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z"></path>
<path id="hg2" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z"></path>
<path id="hg3" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z"></path>
<path id="hg4" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z"></path>
<path id="hg5" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z"></path>
</svg>
The simplest approach is to use a keyTimes attribute to control the fade in and fade out timing.
We have five arrows. The first one takes one second to fade in, then waits for the other four to fade in. Then takes one second to fade out again, and waits for the other four to do the same.
This means that the animation takes 10s in total for each arrow. And there are five key times in that animation:
at 0s, opacity value is 0
at 1s, opacity value is 1
at 5s, opacity value is 1
at 6s, opacity value is 0
at 10s, opacity value is 0
The keyTimes attribute works in conjunction with the values attribute. It specifies at which time in the animation the opacity has to be at each value. So it needs to have the same number of values as there are in the values attribute. The other thing you need to know about keyTimes values is that its time values have to be in fractions of the duration. So for the second time above (1s), we need to use 0.1 (1s of 10s).
So our values attribute should be "0; 1; 1; 0; 0", and our keyTimes attribute will be "0; 0.1; 0.5; 0.6; 1".
Then to offset the start of each arrow's animation, we just use staggered begin times.
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 122.91 110.38">
<defs>
<style>.hg{fill:#ee2330;opacity:0}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="hg" d="M61.65 86.78l-.16-.06L0 109.38v.99l61.49-22.65 61.43 22.66v-.99L61.65 86.78z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite"/>
</path>
<path class="hg" d="M0 87.69v1.49l61.49-22.66 61.43 22.67v-1.48L61.49 65.04 0 87.69z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="1s"/>
</path>
<path class="hg" d="M0 66.05v1.97l61.49-22.66 61.43 22.67v-1.97L61.49 43.39 0 66.05z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="2s"/>
</path>
<path class="hg" d="M61.49 21.65L0 44.31v2.64l61.49-22.66 61.43 22.67v-2.64l-61-22.51-.43-.16z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="3s"/>
</path>
<path class="hg" d="M0 22.66v3.13L61.49 3.13l61.43 22.67v-3.13L61.49 0 0 22.66z">
<animate attributeName="opacity" dur="10s" keyTimes="0;0.1;0.5;0.6;1" values="0;1;1;0;0" repeatCount="indefinite" begin="4s"/>
</path>
</g>
</g>
</svg>
Why didn't work along with path line?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595px" height="841px" viewBox="0 0 595px 841px" enable-background="new 0 0 595 841" xml:space="preserve"
style="border:1px solid green">
<g id="car">
<path fill="#00CC92" d="M405.1,607.225c0,0,1.731-1.022,9.084-1.086c0.466-0.007,9.269-8.254,9.678-8.561
c0.99-0.767,1.194-1.284,3.667-1.476c3.028,0,20.601-0.025,20.601-0.025s6.229-0.332,7.736,2.434
c0.479,0.575,4.434,7.237,4.503,7.596c0,0,0.135,0.159,0.333,0.498c0.472,0.805,1.341,3.723,1.813,6.777
c0.052,0.191,0.09,0.383,0.09,0.588v3.354c0,1.232-1.003,2.236-2.236,2.236h-0.102c0.064-0.365,0.102-0.734,0.102-1.119
c0-3.705-3.002-6.707-6.707-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119h-29.271
c0.064-0.365,0.103-0.734,0.103-1.119c0-3.705-3.003-6.707-6.708-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119
h-2.338c-1.233,0-2.236-1.004-2.236-2.236v-3.354C400.002,613.97,399.728,610.13,405.1,607.225z M442.483,605.027l11.307-0.556
l-1.246-2.798c0,0-0.767-2.235-3.354-2.235s-6.707,0-6.707,0V605.027z M421.076,606.298l3.296-0.217
c0.716-1.591,1.546-2.459,2.306-2.612c0.92-0.192,1.311,0.798,1.311,0.798v1.571l12.258-0.805v-5.558
c0,0-10.725-0.038-11.843-0.038s-2.689,1.954-2.689,1.954L421.076,606.298z M458.133,618.441c0,2.473-1.999,4.473-4.472,4.473
s-4.472-2-4.472-4.473c0-2.471,1.999-4.471,4.472-4.471S458.133,615.97,458.133,618.441z M415.653,618.441
c0,2.473-1.999,4.473-4.472,4.473c-2.472,0-4.472-2-4.472-4.473c0-2.471,2-4.471,4.472-4.471
C413.654,613.97,415.653,615.97,415.653,618.441z">
</path>
</g>
<path fill="none" id="motionPath" stroke="green" stroke-width="8"
d="M400,618c0,0-127,66-112-52s134-264-90-251s-63-117-56-170"></path>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze" >
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>
The problem you are having is due to the fact that the position of the car on the page is added to the (animated) position along the path. So when you click the car, it jumps to effectively:
(motionPath.x + car.x, motionPath.y + car.y)
To fix this, you have to do one of two things:
position the motion path so it starts at (0,0) on the page (the top left), or
position the car at (0,0).
Since you want the car to start where it is on the page, so you can click on it, you are basically forced to choose option #1.
In the example below I've changed the motion path to one that starts at (0,0). I've just used a simple line because I don't have the time to work out the new coordinates for your whole path.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595px" height="841px" viewBox="0 0 595px 841px" enable-background="new 0 0 595 841" xml:space="preserve"
style="border:1px solid green">
<g>
<path id="car"
fill="#00CC92" d="M405.1,607.225c0,0,1.731-1.022,9.084-1.086c0.466-0.007,9.269-8.254,9.678-8.561
c0.99-0.767,1.194-1.284,3.667-1.476c3.028,0,20.601-0.025,20.601-0.025s6.229-0.332,7.736,2.434
c0.479,0.575,4.434,7.237,4.503,7.596c0,0,0.135,0.159,0.333,0.498c0.472,0.805,1.341,3.723,1.813,6.777
c0.052,0.191,0.09,0.383,0.09,0.588v3.354c0,1.232-1.003,2.236-2.236,2.236h-0.102c0.064-0.365,0.102-0.734,0.102-1.119
c0-3.705-3.002-6.707-6.707-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119h-29.271
c0.064-0.365,0.103-0.734,0.103-1.119c0-3.705-3.003-6.707-6.708-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119
h-2.338c-1.233,0-2.236-1.004-2.236-2.236v-3.354C400.002,613.97,399.728,610.13,405.1,607.225z M442.483,605.027l11.307-0.556
l-1.246-2.798c0,0-0.767-2.235-3.354-2.235s-6.707,0-6.707,0V605.027z M421.076,606.298l3.296-0.217
c0.716-1.591,1.546-2.459,2.306-2.612c0.92-0.192,1.311,0.798,1.311,0.798v1.571l12.258-0.805v-5.558
c0,0-10.725-0.038-11.843-0.038s-2.689,1.954-2.689,1.954L421.076,606.298z M458.133,618.441c0,2.473-1.999,4.473-4.472,4.473
s-4.472-2-4.472-4.473c0-2.471,1.999-4.471,4.472-4.471S458.133,615.97,458.133,618.441z M415.653,618.441
c0,2.473-1.999,4.473-4.472,4.473c-2.472,0-4.472-2-4.472-4.473c0-2.471,2-4.471,4.472-4.471
C413.654,613.97,415.653,615.97,415.653,618.441z">
</path>
</g>
<path fill="none" id="motionPath" stroke="green" stroke-width="8"
d="M 0,0 L -250,-470" transform="translate(431,609)"></path>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze" >
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</svg>
You may be wondering why, if the motion path has been moved, why it still being displayed in the same place? The reason is that is that I've added a transform to the motion path so the start corresponds to the centre of the car, which is at approximately (431,609). This doesn't affect the animateMotion because it only cares about what's in the d attribute. It ignores the transform attribute.
Update
Another alternative is to just position both the path and the car so that they start at (0,0). Then wrap the whole thing in a group that you transform to the final position. That allows you to also use the rotate attribute in your animation.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="595px" height="841px" viewBox="0 0 595 841"
style="border:1px solid green">
<g transform="translate(431,609)">
<g id="car">
<path transform="translate(-431,-626)"
fill="#00CC92" d="M405.1,607.225c0,0,1.731-1.022,9.084-1.086c0.466-0.007,9.269-8.254,9.678-8.561
c0.99-0.767,1.194-1.284,3.667-1.476c3.028,0,20.601-0.025,20.601-0.025s6.229-0.332,7.736,2.434
c0.479,0.575,4.434,7.237,4.503,7.596c0,0,0.135,0.159,0.333,0.498c0.472,0.805,1.341,3.723,1.813,6.777
c0.052,0.191,0.09,0.383,0.09,0.588v3.354c0,1.232-1.003,2.236-2.236,2.236h-0.102c0.064-0.365,0.102-0.734,0.102-1.119
c0-3.705-3.002-6.707-6.707-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119h-29.271
c0.064-0.365,0.103-0.734,0.103-1.119c0-3.705-3.003-6.707-6.708-6.707s-6.707,3.002-6.707,6.707c0,0.385,0.038,0.754,0.103,1.119
h-2.338c-1.233,0-2.236-1.004-2.236-2.236v-3.354C400.002,613.97,399.728,610.13,405.1,607.225z M442.483,605.027l11.307-0.556
l-1.246-2.798c0,0-0.767-2.235-3.354-2.235s-6.707,0-6.707,0V605.027z M421.076,606.298l3.296-0.217
c0.716-1.591,1.546-2.459,2.306-2.612c0.92-0.192,1.311,0.798,1.311,0.798v1.571l12.258-0.805v-5.558
c0,0-10.725-0.038-11.843-0.038s-2.689,1.954-2.689,1.954L421.076,606.298z M458.133,618.441c0,2.473-1.999,4.473-4.472,4.473
s-4.472-2-4.472-4.473c0-2.471,1.999-4.471,4.472-4.471S458.133,615.97,458.133,618.441z M415.653,618.441
c0,2.473-1.999,4.473-4.472,4.473c-2.472,0-4.472-2-4.472-4.473c0-2.471,2-4.471,4.472-4.471
C413.654,613.97,415.653,615.97,415.653,618.441z">
</path>
</g>
<path fill="none" id="motionPath" stroke="green" stroke-width="8"
d="M 0,0 L -250,-470"/>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze"
rotate="auto-reverse">
<mpath xlink:href="#motionPath"></mpath>
</animateMotion>
</g>
</svg>
I'm working with zurb foudation and have a roll over on an svg that is within the header. If the svg is under
then the roll over effect on the svg doesn't work. but if I remove either the section tag or the data-topbar attribute then it works fine. you can see an example of all three variations here:
http://firefields.com/foundation-5.5.0/icon-issue.html
and this is the svg code
<svg version="1.1" id="headTest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve" >
<defs>
<mask id="Mask">
<path fill="#ffffff" d="M25.4,12.7L15.3,28.6c0.2,0.2,0.4,0.4,0.6,0.5c0.4,0.2,0.7,0.4,1.2,0.5L27,13.9c-0.3-0.4-0.6-0.7-0.8-0.8
C25.9,12.9,25.7,12.8,25.4,12.7z"/>
<path fill="#ffffff" d="M14.3,25.9c0.3-0.2,0.6-0.3,0.8-0.4l1.5-2.3c-1,0.1-2.1,0.4-3.3,0.9c-2.1,1.1-4.2,3-5.8,5.4
c-0.5,0.7-0.8,1.4-1.1,2.1c0.5,0.7,0.9,1.2,1.5,1.8c0.4-0.9,0.8-1.9,1.4-2.8C10.6,28.5,12.4,26.8,14.3,25.9z"/>
<path fill="#ffffff" d="M20.3,37.6c1.6-2.5,2.5-5.3,2.5-7.8c0-1.7-0.4-3.2-1-4.3l-1.2,2.1c0.2,0.7,0.4,1.4,0.3,2.2
c0,2.1-0.8,4.6-2.2,6.7c-0.5,0.7-1,1.4-1.5,2c-2.8-0.7-5.3-1.9-7.6-3.6C9.2,35.6,9.1,36.3,9,37c2.6,2,5.6,3.2,8.8,3.7
c0.6-0.6,1.1-1.1,1.6-1.8l0,0c0,0,0,0,0.1,0C19.7,38.5,20,38.1,20.3,37.6z"/>
<path fill="#ffffff" d="M38.7,12c-0.8-1.7-2-3.3-3.3-4.6c-0.1,0.7-0.4,1.5-0.7,2.2c0,0,0,0.1,0.1,0.1l-0.1-0.1c-0.4,1-0.8,2-1.5,3
c-1.4,2.1-3.2,3.8-5,4.8c-0.7,0.3-1.3,0.6-1.9,0.7l-1.2,2.1c1.3,0.1,2.7-0.3,4.1-0.9c2.1-1.1,4.2-3.1,5.8-5.5
c0.5-0.7,0.8-1.4,1.1-2.1c0.3,0.5,0.6,0.8,0.7,1.3c4.5,8.9,0.9,19.7-7.9,24.2c-2.4,1.2-4.9,1.9-7.5,1.9c-0.5,0.7-0.9,1.4-1.5,2
c3.3,0.2,6.7-0.6,9.9-2.1C39.9,33.9,43.8,21.8,38.7,12z"/>
<path fill="#ffffff" d="M12.9,5c2.9-1.5,6-2.1,9.1-1.9c0.6-0.7,1.1-1.3,1.7-1.9c-3.8-0.5-7.8,0.1-11.6,2c-9.9,4.9-13.9,17-8.9,26.8
c1,2.1,2.4,3.9,4.1,5.5c0.1-0.7,0.4-1.5,0.7-2.1c-1.1-1.2-2.1-2.6-3-4.2C0.5,20.3,4,9.5,12.9,5z"/>
<path fill="#ffffff" d="M22.4,5.6c-1.6,2.5-2.5,5.3-2.5,7.8c0,1.4,0.2,2.6,0.7,3.5l1.4-2.2c-0.1-0.4-0.1-0.8-0.1-1.3
c0-2.1,0.8-4.6,2.2-6.7c0.7-1.1,1.4-2.1,2.1-2.8c2.6,0.8,5,2.1,7.1,4.1c0.3-0.8,0.5-1.6,0.5-2.2c-2.3-2-5-3.3-7.9-4
c-0.7,0.5-1.2,1-1.8,1.7c0.3,0.1,0.2,0-0.1,0C23.4,4,22.9,4.8,22.4,5.6z"/>
</mask>
</defs>
<g mask="url(#Mask)">
<circle fill="#222222" class="icon-background-circle" cx="21" cy="21" r="21"/>
<circle fill="#73e8eb" class="icon-foreground-circle" cx="21" cy="21" r="0">
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseover" to="21" dur="0.15s" fill="freeze" />
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseout" to="0" dur="0.15s" fill="freeze" />
</circle>
</g>
<rect id="hoverZone" x="0" y="0" width="42" height="42" fill-opacity="0" />
</svg>
hope you can help.
It has nothing to do with the <section> element.
When an an SVG is embedded via the <img> element, animations are allowed, but interaction (such as mouse events) are not. This is for privacy reasons.
Use <object> or <embed> instead.
I am trying to animate the outer ring of an SVG. Since it's not filled circle, I can't change the element and spell it out with cx and cy and then change it via the animateTransform in the code.
What I' trying to do is make the outer ring "pulse" by going from 100% down to 80% then back up to 100%. I can make the entire SVG animate changing the scale="1 1" to scale=".8 .8" but that scales the whole SVG and from the upper left corner. Any thoughts on how to animate just the outer ring? I generate my SVG using Illustrator which doesn't make clean SVG. Any help is much appreciated.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<g>
<path fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2
c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2
c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9
c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7
c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z
M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9
c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8
c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8
C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9
C6.9,20.1,6.4,22.5,6.4,25z"/>
</g>
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/>
</g>
</svg>
The simplest solution would be to convert your outer circle back to a thick line. The equivalent circle would be:
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF"/>
Then you can just animate the radius.
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF">
<animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/>
</circle>
The final working demo is as follows:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<g>
<circle cx="25" cy="25" r="19.5" stroke-width="2" fill="none" stroke="#00AEEF">
<animate attributeName="r" values="19.5; 15.6; 19.5" dur="1s" repeatCount="indefinite"/>
</circle>
</g>
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z"/>
</g>
</svg>
It's quite easy to do this with css transform animations. Insert '-webkit-', '-moz-' and '-ms-' prefixes if needed.
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
#ring {
animation-name: pulse;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
transform-origin: center;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<path id="ring" fill="#00AEEF" d="M4.5,25.1c0-1.9,0.3-3.7,0.7-5.4c0.5-1.7,1.2-3.4,2.1-4.9s2-2.9,3.2-4.2s2.6-2.3,4.2-3.2
c1.5-0.9,3.2-1.6,4.9-2.1c1.8-0.5,3.6-0.8,5.4-0.8c1.9,0,3.7,0.2,5.4,0.7c1.8,0.6,3.4,1.3,4.9,2.2s2.9,2,4.2,3.2
c1.3,1.3,2.3,2.6,3.2,4.2c0.9,1.5,1.6,3.1,2.1,4.9c0.5,1.7,0.7,3.5,0.7,5.4s-0.2,3.7-0.7,5.4c-0.5,1.7-1.2,3.4-2.1,4.9
c-0.9,1.5-2,2.9-3.2,4.2c-1.3,1.2-2.7,2.2-4.2,3.1s-3.2,1.6-4.9,2.1c-1.7,0.5-3.5,0.7-5.4,0.7s-3.7-0.2-5.4-0.7
c-1.7-0.5-3.4-1.2-4.9-2.1c-1.5-0.9-2.9-2-4.2-3.2c-1.2-1.3-2.3-2.6-3.2-4.1s-1.6-3.1-2.1-4.9C4.8,28.7,4.5,26.9,4.5,25.1z
M6.4,25c0,1.7,0.2,3.3,0.7,4.9C7.5,31.5,8.2,33,9,34.3c0.8,1.4,1.8,2.6,2.9,3.8c1.1,1.1,2.4,2.1,3.8,2.9c1.4,0.8,2.9,1.4,4.4,1.9
c1.6,0.4,3.2,0.7,4.9,0.7c1.7,0,3.3-0.2,4.9-0.7c1.6-0.4,3.1-1.1,4.4-1.9c1.4-0.8,2.6-1.8,3.8-2.9c1.1-1.1,2.1-2.4,2.9-3.8
c0.8-1.4,1.4-2.9,1.9-4.4c0.5-1.6,0.7-3.2,0.7-4.9c0-1.7-0.2-3.3-0.7-4.9S41.8,17,41,15.7c-0.8-1.4-1.8-2.6-2.9-3.8
C37,10.8,35.7,9.8,34.3,9s-2.9-1.4-4.4-1.9c-1.6-0.5-3.2-0.7-4.9-0.7c-2.5,0-4.9,0.5-7.2,1.5s-4.2,2.3-5.9,4c-1.7,1.7-3,3.7-4,5.9
C6.9,20.1,6.4,22.5,6.4,25z" />
<path id="pattern_3_" fill="#00AEEF" d="M15,35h10v-1.4H15V35z M16.4,15H15v10h1.4V15z M15,31.4h10V30H15V31.4z M15,27.9h10v-1.4
H15V27.9z M23.6,15h-1.4v10h1.4V15z M20,15h-1.4v10H20V15z M25,15v1.4h10V15H25z M25,20h10v-1.4H25V20z M25,23.6h10v-1.4H25V23.6z
M30,35h1.4V25H30V35z M33.6,35H35V25h-1.4V35z M26.4,35h1.4V25h-1.4V35z" />
</svg>
It's possible to make this work in Firefox too by adding a couple of extra elements to isolate the animation, to emulate what transform-origin does. See fiddle.
When I use animateMotion along an animated path, Firefox (26) follow the original path while Opera (17) and Chrome (32) follow the changing path. For example, in the following svg the red rectangle ends at position of 100,10 in FF while at 50,10 in other browsers:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<path id="p" stroke="black" stroke-width="1" d="M 0,10 100,10"/>
<rect id="r" x="-5" y="-5" width="10" height="10" fill ="red"/>
<animate xlink:href="#p" attributeName="d" to="M 0,10 50,10" dur="5s" fill="freeze" repeatCount="1"/>
<animateMotion xlink:href="#r" dur="5s" fill="freeze" repeatCount="1">
<mpath xlink:href="#p"/>
</animateMotion>
</svg>
What is the correct behavior according to the SVG spec?
The animated path should be used, there's an open Firefox bug on that.