svg object didn't work along with the path Why not?

svg object didn't work along with the path Why not? - 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>

Related

Two-frame SVG animation: do the last frame need to be specified twice?

I want to have a smooth one-time transition between two frames. The animation should stop at the last frame. This works as expected:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="50%" height="50%">
<path d="M100 200 c-50,-100 150,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
<animate
dur="2"
attributeName="d"
values="M100 200 c50,-100 250,-100 200,0; M100 200 c-50,-100 150,-100 200,0"
keySplines="0.5 0.5 0.5 0.5">
</animate>
</path>
</svg>
However, I need to specify the last frame path twice: the second time in the d tag. Otherwise, the image eventually disappears. Any pure-SVG method of having such a animation with each frame specified only once?

Like this perhaps. I've reversed the paths so the initial state is the base value and added fill="freeze" to retain the animation state once it's finished.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="100%" height="100%">
<path d="M100 200 c50,-100 250,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
<animate
dur="2"
attributeName="d"
to="M100 200 c-50,-100 150,-100 200,0" fill="freeze">
</animate>
</path>
</svg>

SMIL animation of skillbars

I've been searching for hours and hours and I just don't comprehend how I cannot find a solution to animate skillbars in SMIL.
So I've got an SVG composed of two paths, one for the outter border and the other for the fill and I want to animate the fill onload of the page to start at 0 and reach its final width or position after a given amount of time (say 800ms).
Have a look at the HTML:
https://codepen.io/anon/pen/PaOqrr
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796" enable-background="new 0.626 346.31 226.762 13.796" xml:space="preserve">
<path fill="#4A929D" d="M159.155,353.208c0,3.536-2.868,6.398-6.398,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0 c0-3.531,2.865-6.397,6.397-6.397h145.233C156.289,346.81,159.155,349.676,159.155,353.208L159.155,353.208z"/>
<path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
I really want to achieve this only with SMIL. I know how to do with JS and CSS but I can't believe this won't work with animate.
I have tried the attribute "x" and "width" but it doesn't budge.
Any idea?

Paths don't have a x or width attribute, so animating those won't do anything.
There are several ways to achieve what you want. But the simplest would probably be use a mask or a clip path to define the area between the dots and then animate the position of your progress bar. You would start with it off to the left (ie not visible through the clip) and then slowly move it to the right, so that it appears to grow in length.
Your current bar only covers about two thirds of our progress. So we can't really use it. Scaling or moving it won't help us. So we might as well discard it.
However we can use the dots path, as that matches what we need. If we copy the path definition across, we get the following:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" viewBox="0.626 346.31 226.762 13.796">
<path fill="#4A929D"
d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
<path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"
d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</svg>
We can now animate the progress bar by animating the transform of that path. We use a translate() transform to move it from left to right by an appropriate amount.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" viewBox="0.626 346.31 226.762 13.796">
<path fill="#4A929D"
d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="-226, 0" to="0, 0"
dur="3s" fill="freeze"/>
</path>
<path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"
d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</svg>
Now moving it alone is not enough. We need to hide the part of the moving bar that is outside our channel of dots. We can do that by applying a <mask> or a <clipPath>. I'm going to use a clip path. Since the clip path will be the same shape as the progress bar path, and the dots path, we will use the same definition.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" viewBox="0.626 346.31 226.762 13.796">
<defs>
<clipPath id="bar-clip">
<path d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</clipPath>
</defs>
<g clip-path="url(#bar-clip)">
<path fill="#4A929D"
d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="-226, 0" to="0, 0"
dur="3s" fill="freeze"/>
</path>
</g>
<path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"
d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</svg>
When you look at the above, you may wonder why we applied the clip to a group (<g>) rather than directly to the progress bar path itself. The reason is because, if we apply it to the path, it will be affected by the animated transform. It will move with the path, and so no clipping will happen.
Finally, we are using the same path three times here. You may wonder if we can do anything to make the file smaller. The answer is yes. We can define the path just once, then refer to it everywhere else it is needed. We can do that by using the <use> element.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" viewBox="0.626 346.31 226.762 13.796">
<defs>
<clipPath id="bar-clip">
<path id="bar-shape" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</clipPath>
</defs>
<g clip-path="url(#bar-clip)">
<use xlink:href="#bar-shape" fill="#4A929D">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="-226, 0" to="0, 0"
dur="3s" fill="freeze"/>
</use>
</g>
<use xlink:href="#bar-shape" fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"/>
</svg>

Stroke-linecap round with polyline

I am very new to SVG and I am having some trouble with my SVG polyline. I am trying to round the top of the arrow below with stroke-linecap="round" and stroke-linejoin="round" but it doesn't seem to work.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.7 44.5" enable-background="new 0 0 23.7 44.5" xml:space="preserve">
<polygon points="22.3,44.5 23.7,43.1 2.8,22.3 23.7,1.4 22.3,0 0,22.3 " stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Am I doing anything wrong?

You haven't specified a stroke so no stroke is drawn (try stroke="red") . The polygon is actually visible because it is filled that way. What you really want are two lines stroked. Something like this...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
<polyline points="23,43.8 3.5,22.3 22.3,3 " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke="black" fill="none"/>
</svg>

Rotate circle and position arc over it with start and end angle

Hi is there any way to design the below picture with SVG or any other way?
Please find the SVG Code for the circle with head
<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="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve">
<g>
<title>Sample</title>
<g>
<path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391
c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682
c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065
C36.8,98.747,22.501,84.307,22.501,66.682z"/>
</g>
Head
Based on the head angle in the example 332° the circle should rotate
Red Arc
Based on the start and end position of the arc it should start from there with displaying the start and end position as in the picture 50 and 180.
Please help me to design :-)

Try this i used rect and circle instead of path
svg{
background:#223D50;
}
<svg width="100%" height="100%" viewbox="0 0 100 100">
<rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
<circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
<circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
<text x="36" y="55" fill="white" font-size="5">Check</text>
</svg>

SVG Animation on a ring outside of an icon

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.

Develop Reference

node.js excel linux python-3.x azure haskell apache-spark rust .htaccess string

svg object didn't work along with the path Why not? - svg

Related

Two-frame SVG animation: do the last frame need to be specified twice?

SMIL animation of skillbars

Stroke-linecap round with polyline

Rotate circle and position arc over it with start and end angle

SVG Animation on a ring outside of an icon

Categories

Resources