SMIL animation of skillbars - svg

Question

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?

Answer 1

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>