I am facing a problem with an svg file in firefox which I was able to boil down to the following code (the original image had a couple of thousend lines of code):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70">
<style type="text/css"><![CDATA[
.sun {
transform-box: fill-box;
animation-name: sun-spoke-rotate;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
.sun path {
transform-box: fill-box;
animation-name: sun-spoke-scale;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g class="sun">
<path
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"/>
<path
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"/>
<path
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"/>
<path
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"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
</g>
</g>
This works as expected in chrome and the newest version of edge. It of course doesn't work at all in Internet Explorer but what really bothers me is that I also has issues in firefox. It works well --- until I start moving the mouse??!! Then it starts to jump all over the place. I figured it has something to do with the transform-box: fill-box. Any ideas?
Replace 50% in transform-origin with the coordinates of the center of rotation in pixels
You can get the coordinates of the center of rotation using the Javascript getBBox() method
The property transform-box: fill-box; in this case must be removed from the CSS rules
// Calculating the center of rotation
let bb = sun.getBBox();
console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70" style="border:1px solid;">
<style type="text/css"><![CDATA[
#sun {
animation-name: sun-spoke-rotate;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#sun path {
animation-name: sun-spoke-scale;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g id="sun">
<path
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"/>
<path
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"/>
<path
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"/>
<path
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"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
<circle
</g>
</g>
I have been scratching my head and struggling to animate a svg symbol which i would like to rotate and scale from where it is placed on the canvas. Instead of their individual centres, the symbols are all taking the canvas (0, 0) as the origin or another location.
The SVG in action
Basically I would like one instance of <use> to rotate back and forth, another <use> to scale up and down and a third <use> to do both rotate and scale in it's location. Eventually I will have around 20 <use> with different locations / colours / rotations / scales of the same <symbol>.
I definetly don't want to use JavaScript or external resources, just a simple bit of inline? svg code.
And as you can probably see in the code, I am fumbling around, I am still very new to coding.
Unsuccessfully atempts using viewBox, transform, translate probably in the wrong part of the code.
<?xml version="1.0" encoding="UTF-8"?>
<!-- Creator: Made in the Moon -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
<style type="text/css">
<![CDATA[
.fily {fill:#FFDA03}
.filb {fill:#224D8F}
.filp {fill:#3F2A56}
.yrot {transform-origin: 15% 11%;}
.sp {animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite; transform-origin: center; }
#keyframes sp {
0%{transform: scale(0.9);}
50%{transform: scale(1.3);}
100%{transform: scale(0.9);}
}
.ro {animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
#keyframes ro {
0%{transform: rotate(0deg); }
50%{transform: rotate(90deg); }
100%{transform: rotate(0deg); }
}
.rotateandscale
{animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
#keyframes rotateandscale {
0%{transform: rotate(0deg) scale(0.9);}
50%{transform: rotate(20deg) scale(1.3);}
100%{transform: rotate(0deg) scale(0.9);}
}
]]></style>
<symbol id="grow" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<path d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
</symbol></defs>
<use id="p-grow" viewBox="0 0 160 160" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>
<use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>
<use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>
</svg>
Each instance of <use> should individually scale and rotate from the centre of there location on the canvas.
If you need to transform the shapes around the center, you have to set the value for transform-origin to be this center. I hope this is what you are asking.
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fily {fill:#FFDA03}
.filb {fill:#224D8F}
.filp {fill:#3F2A56}
/*.yrot {transform-origin: 15% 11%;}*/
use{}
.sp {
transform-origin: 300px 740px;
animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite; transform-origin: center; }
#keyframes sp {
0%{transform: scale(0.9);}
50%{transform: scale(1.3);}
100%{transform: scale(0.9);}
}
.ro {
transform-origin: 145px 145px;
animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
#keyframes ro {
0%{transform: rotate(0deg); }
50%{transform: rotate(90deg); }
100%{transform: rotate(0deg); }
}
.rotateandscale{
transform-origin: 800px 350px;
animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; }
#keyframes rotateandscale {
0%{transform:scale(0.9) rotate(0deg) }
50%{transform:scale(1.3) rotate(90deg);}
100%{transform: scale(0.9) rotate(0deg);}
}
]]></style>
<symbol id="grow" viewBox="186.8 121 627 760" >
<path id="kk" d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
</symbol></defs>
<use id="p_grow" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>
<use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>
<use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>
</svg>
Amazing, thank you so much, really easy to follow whats going on now. Thank you for taking the time to explain this :)
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fily{fill:#FFDA03; transform-origin: 800px 350px;}
.filb{fill:#224D8F; transform-origin: 300px 740px;}
.filp{fill:#3F2A56; transform-origin: 145px 145px;}
.sp{animation-name: sp; animation-timing-function: linear; animation-duration: 5s; animation-iteration-count: infinite;}
#keyframes sp {
0%{transform: scale(0.9);}
50%{transform: scale(1.3);}
100%{transform: scale(0.9);}}
.ro{animation-name: ro; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite;}
#keyframes ro{
50%{transform: rotate(90deg);}}
.rotateandscale{animation-name: rotateandscale; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite;}
#keyframes rotateandscale{
0%{transform:scale(0.9) rotate(0deg)}
50%{transform:scale(1.3) rotate(90deg);}
100%{transform: scale(0.9) rotate(0deg);}}
]]></style>
<symbol id="grow" viewBox="186.8 121 627 760" >
<path id="kk" d="M315 155l91 -34c57,20 131,20 188,0l91 34 126 60c3,1 2,0 2,3l-32 131c0,1 0,1 -1,1l-65 -2c-22,118 -13,236 -9,355 -42,48 -78,106 -110,175 -66,3 -126,3 -192,0 -32,-69 -68,-127 -110,-175 4,-119 13,-237 -9,-355l-65 2c-1,0 -1,0 -1,-1l-32 -131c0,-3 -1,-2 2,-3l126 -60z"/>
</symbol></defs>
<use id="p_grow" xlink:href="#grow" class="filp ro" x="65" y="65" height="160" width="160"/>
<use id="b-grow" xlink:href="#grow" class="filb sp" x="-100" y="340" height="80%" width="80%"/>
<use id="y-grow" xlink:href="#grow" class="fily rotateandscale" x="550" y="100" height="50%" width="50%"/>
</svg>
I am creating animated calligraphy using the stroke-dashoffset technique, applying the stroke as an animated mask on top of an SVG. This works on most browsers, but I would like to apply the same mask on top of a PNG instead. That way, even if the browser has trouble with both SVG and mask (IE...), at least it will just display the PNG as-is.
Here is a codepen of the working calligraphy with pure SVG:
https://codepen.io/benviatte/pen/PMzmYB
Here is the codepen of the non-working calligraphy where I put an image instead of the base SVG. It just displays blank, unless I remove the "mask-image" property, in which case it doesn't animate:
https://codepen.io/benviatte/pen/eqzWzJ
Finally, here is the code of the PNG version that just displays blank:
HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</svg>
<img src="http://thehermitcrab.org/imgs/S2.png"/>
CSS:
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 1s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
img, svg{
width: 300px;
position: absolute;
top: 0;
left: 0;
}
img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Thank you so much!!!
You can fill the masked path with an image like so:
I hope this is what you were asking.
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 5s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
svg {
width: 300px;
height: 300px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="0" y="0" width="100" height="100" />
</pattern>
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</defs>
<path mask="url(#mask)" fill="url(#img)" d="m 84.347106,72.730822 c -6.700057,0.41349 -13.536192,0.895 -20.004337,2.74122 -8.269143,3.35101 -15.144649,10.28592 -18.335113,18.62393 -1.745059,4.7139 -2.424554,9.829858 -1.055133,14.737138 0.971246,7.85177 6.591277,14.03623 12.594733,18.68723 4.899213,3.10976 10.516595,4.80935 15.88174,6.85728 3.598383,2.16843 7.853428,4.63947 9.276845,8.8059 0.995595,7.43174 -3.283258,14.41911 -7.577125,20.14167 -2.859338,3.25041 -7.082956,5.7682 -11.428016,6.06759 -2.76877,-0.88985 -4.676886,-3.50515 -6.467732,-5.66664 -0.8438,-2.84582 -0.503218,-6.25249 -2.88424,-8.50648 -2.356943,-2.51972 -6.848373,-3.89583 -9.901785,-1.90687 -1.783614,1.60567 -1.978665,4.29248 -0.431156,6.14634 0.628015,2.58248 4.330039,1.06794 4.996601,3.36938 -0.140661,3.29536 -3.415289,5.93264 -3.011822,9.2671 1.471965,3.46591 3.011956,7.79888 7.009623,8.93583 2.779476,2.56577 6.811098,1.17952 10.184223,1.15628 7.753544,-0.82418 15.439311,-4.27064 20.776362,-10.01337 3.918376,-5.23506 6.686713,-11.29125 9.19183,-17.29292 0.679648,-4.33031 0.214675,-8.76706 0.319579,-13.12674 -4.685098,-7.44203 -12.013326,-12.8652 -20.16128,-15.99596 -4.833407,-2.57162 -11.582728,-2.85294 -14.441374,-8.15604 -4.638062,-7.39166 -5.929022,-17.810038 -0.40541,-25.114328 3.085422,-4.36163 7.883758,-8.71782 13.633176,-8.01843 4.028691,-0.21996 8.250498,0.0932 11.561718,2.63603 2.904262,1.44386 1.746882,5.41774 0.879004,7.79388 -2.021102,4.66617 -3.832398,9.978878 -2.737189,15.088588 0.62468,1.45971 1.572558,3.02113 2.790336,3.97665 2.563411,1.00256 5.41245,0.65028 7.526616,-1.1464 2.393394,-1.33047 7.187979,-2.70727 6.367699,-6.21466 -1.29931,-1.67133 -4.660058,0.16306 -5.006198,-2.59652 -0.718456,-6.014858 3.485958,-11.212508 3.846428,-17.152098 0.2919,-3.79706 1.28679,-8.45196 -1.339374,-11.64839 -3.199638,-2.55035 -7.777181,-2.43209 -11.649229,-2.47619 z" />
</svg>
I need a pair of fresh eyes.
Actions: Created svg in both Illustrator and switched to Inkscape when line would not animate. Still not working. Have tried with my current svg and a few others, including a basic line to no avail.[enter code here]
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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="Layer_1"
x="0px"
y="0px"
viewBox="0 0 1280 372.7"
style="enable-background:new 0 0 1280 372.7;"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="ZRlogoinkscape.svg"><metadata
id="metadata3348"><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><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="706"
id="namedview3346"
showgrid="false"
inkscape:zoom="0.9421875"
inkscape:cx="478.14262"
inkscape:cy="186.35001"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" />
<defs
id="defs3337">
<style
id="style3339" type="text/css">
.path {
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 5s linear forwards;
-moz-animation: dash 5s linear forwards;
-o-animation: dash 5s linear forwards;
animation: dash 5s linear forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset:0;
}
}
</style>
<!--var path = document.querySelector('.path');
var length = path.getTotalLength();-->
</defs>
<g
id="g3341"
style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
class="path"
d="M-2.2,175.5c102.3,6.1,204.8,8.6,307.3,7.3c25.3-0.3,50.6-0.9,75.9-1.6c20.9-0.6,45.5,1.5,63.7-10.6 c12.7-8.5,22.4-21.1,29.9-34.1c10.5-18,18.2-38.4,36.6-49.9c9.9-6.2,21.2-10.3,32.8-11.8C555,73.2,569,73,573.5,85.3 c3.8,10.5,0.3,23.4-3.1,33.5c-4.4,12.9-11.4,25.2-21.2,34.8c-0.4,0.4-3.7,4.4-3.2,4.3c31.6-6.6,63.5,9.1,82.8,33.9 c21.4,27.4,23.9,63.8,12.6,96c-12.5,35.5-43,70.9-82.9,73.5c-15.3,1-31.7-4.2-42.5-15.3c-12.9-13.3-14.4-32.4-9.6-49.5 c5.2-18.7,16.2-35.1,27.8-50.5c11.9-15.7,24.8-30.5,38.3-44.8c26.5-27.9,54.9-53.8,82.2-80.9c13.3-13.2,26.7-26.6,38.8-41 c10-11.8,19.5-25.7,19.2-41.8c-0.3-14.5-9.4-29-25.2-28.7C677,8.8,666.1,17,661.7,26.4c-7.2,15.2,9,29.3,22.5,32.6 c18.6,4.6,39.9-2.7,56.9,8.4c6.3,4.1,12.3,10.8,12.8,18.7c0.8,11.8-11.1,17.8-20.1,22.6c-16.1,8.5-34.4,13.1-52.7,13.3 c-8.9,0.1-17.6-1-26.3-2.9c-1.2,1.4-2.3,2.9-3.5,4.3c5.6-5.7,16.7-5.3,23.7-3.8c7.8,1.7,15.3,5.3,21.7,10 c13.9,10.3,23,25.9,36,37.2c15.4,13.3,33.9,15.4,53.5,14.3c22.2-1.2,44.3-3.1,66.4-4.9c89.5-7.1,179.2-15.5,269.1-14.6 c50.5,0.5,101,4,150.8,12c2.7,0.4,6.5-8,7.8-7.8c-92.3-14.9-186-13.9-279.1-8.1c-46.6,2.9-93.1,6.9-139.6,10.6 c-22.9,1.8-45.8,3.9-68.8,5.1c-20.5,1-39-2-54.5-16.3c-14.6-13.5-24.8-31.8-43.1-40.9c-7.7-3.8-16.6-6.2-25.2-5 c-8,1.1-14.1,5.7-19.6,11.3c-0.2,0.2-3.7,4.3-3.5,4.3c34.6,7.8,73.1-0.8,100.1-24.3c5.1-4.4,10.7-9.7,13.3-16.1 c3-7.6,0.2-15.5-5.1-21.3c-14.5-15.9-36.5-10.7-55.6-12.7c-9-0.9-17.5-3.8-24.2-10.2c-2.8-2.7-5.2-5.9-6.6-9.5 c-2-5.2-0.7-9,0.7-14c0.7-2.6,0,0.4-1.1,0.8c0.9-0.3,1.8-1,2.7-1.4c1.6-0.7,3.3-1.1,5-1.4c3.9-0.7,7.9-0.4,11.6,0.9 c7.4,2.5,12.7,9,15.2,16.3c6.9,20.1-5.5,38.9-18.4,53.4c-13.8,15.4-28.5,30-43.4,44.5c-28.3,27.5-57.2,54.4-83.7,83.7 c-13,14.3-25.3,29.2-36.5,44.9c-10.8,15.1-20.6,31.8-24,50.2c-3.1,16.9,0.9,34.6,14.4,46.1c12.4,10.5,29.5,14.1,45.3,11.7 c33.6-5.2,63.2-34.5,80.2-62.5c17.7-29.2,25.5-66.6,12.6-99.2c-11.9-30.3-41.3-54.6-74.1-57.8c-7.5-0.7-14.9-0.2-22.3,1.3 c-1.1,1.4-2.1,2.9-3.2,4.3c14.4-14.1,25.5-31.1,30.4-50.8c2.1-8.6,4.1-19.2,0.2-27.6c-4.7-10.1-16.4-10.2-26-9.3 c-19.2,1.8-36.8,10.5-50.9,23.5c-13.4,12.2-22.2,27-30.7,42.8c-4.8,8.8-9.5,18.2-16.2,25.7c-8.2,9.1-21.3,12.2-32.9,13.3 c-26.2,2.6-53,2.1-79.3,2.6c-53.1,1.1-106.3,1.1-159.4,0.2c-59.9-1.1-119.7-3.4-179.5-7c-1.3-0.1-3.5,2.6-4.3,3.5 C0.9,171.6-2.1,175.5-2.2,175.5L-2.2,175.5z"
style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
JSFiddle: https://jsfiddle.net/senorzacharias/f2qmu66L/
There are several things wrong here.
The primary thing that was wrong was the fact that the inline style attributes take precendence over the CSS rules. So the style="...stroke-dasharray:none.." was preventing the line animation from functioning.
Once you fix that, the stroke-width value of 0.1 means that it is too small to be visible.
Once you fix those two things, you get this:
I've made the stroke red so it is easier to see.
.path {
stroke: red;
stroke-width: 4;
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 5s linear forwards;
-moz-animation: dash 5s linear forwards;
-o-animation: dash 5s linear forwards;
animation: dash 5s linear forwards;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset:0;
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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="Layer_1"
x="0px"
y="0px"
viewBox="0 0 1280 372.7"
style="enable-background:new 0 0 1280 372.7;"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="ZRlogoinkscape.svg"><metadata
id="metadata3348"><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><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="706"
id="namedview3346"
showgrid="false"
inkscape:zoom="0.9421875"
inkscape:cx="478.14262"
inkscape:cy="186.35001"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" />
<g
id="g3341"
style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
class="path"
d="M-2.2,175.5c102.3,6.1,204.8,8.6,307.3,7.3c25.3-0.3,50.6-0.9,75.9-1.6c20.9-0.6,45.5,1.5,63.7-10.6 c12.7-8.5,22.4-21.1,29.9-34.1c10.5-18,18.2-38.4,36.6-49.9c9.9-6.2,21.2-10.3,32.8-11.8C555,73.2,569,73,573.5,85.3 c3.8,10.5,0.3,23.4-3.1,33.5c-4.4,12.9-11.4,25.2-21.2,34.8c-0.4,0.4-3.7,4.4-3.2,4.3c31.6-6.6,63.5,9.1,82.8,33.9 c21.4,27.4,23.9,63.8,12.6,96c-12.5,35.5-43,70.9-82.9,73.5c-15.3,1-31.7-4.2-42.5-15.3c-12.9-13.3-14.4-32.4-9.6-49.5 c5.2-18.7,16.2-35.1,27.8-50.5c11.9-15.7,24.8-30.5,38.3-44.8c26.5-27.9,54.9-53.8,82.2-80.9c13.3-13.2,26.7-26.6,38.8-41 c10-11.8,19.5-25.7,19.2-41.8c-0.3-14.5-9.4-29-25.2-28.7C677,8.8,666.1,17,661.7,26.4c-7.2,15.2,9,29.3,22.5,32.6 c18.6,4.6,39.9-2.7,56.9,8.4c6.3,4.1,12.3,10.8,12.8,18.7c0.8,11.8-11.1,17.8-20.1,22.6c-16.1,8.5-34.4,13.1-52.7,13.3 c-8.9,0.1-17.6-1-26.3-2.9c-1.2,1.4-2.3,2.9-3.5,4.3c5.6-5.7,16.7-5.3,23.7-3.8c7.8,1.7,15.3,5.3,21.7,10 c13.9,10.3,23,25.9,36,37.2c15.4,13.3,33.9,15.4,53.5,14.3c22.2-1.2,44.3-3.1,66.4-4.9c89.5-7.1,179.2-15.5,269.1-14.6 c50.5,0.5,101,4,150.8,12c2.7,0.4,6.5-8,7.8-7.8c-92.3-14.9-186-13.9-279.1-8.1c-46.6,2.9-93.1,6.9-139.6,10.6 c-22.9,1.8-45.8,3.9-68.8,5.1c-20.5,1-39-2-54.5-16.3c-14.6-13.5-24.8-31.8-43.1-40.9c-7.7-3.8-16.6-6.2-25.2-5 c-8,1.1-14.1,5.7-19.6,11.3c-0.2,0.2-3.7,4.3-3.5,4.3c34.6,7.8,73.1-0.8,100.1-24.3c5.1-4.4,10.7-9.7,13.3-16.1 c3-7.6,0.2-15.5-5.1-21.3c-14.5-15.9-36.5-10.7-55.6-12.7c-9-0.9-17.5-3.8-24.2-10.2c-2.8-2.7-5.2-5.9-6.6-9.5 c-2-5.2-0.7-9,0.7-14c0.7-2.6,0,0.4-1.1,0.8c0.9-0.3,1.8-1,2.7-1.4c1.6-0.7,3.3-1.1,5-1.4c3.9-0.7,7.9-0.4,11.6,0.9 c7.4,2.5,12.7,9,15.2,16.3c6.9,20.1-5.5,38.9-18.4,53.4c-13.8,15.4-28.5,30-43.4,44.5c-28.3,27.5-57.2,54.4-83.7,83.7 c-13,14.3-25.3,29.2-36.5,44.9c-10.8,15.1-20.6,31.8-24,50.2c-3.1,16.9,0.9,34.6,14.4,46.1c12.4,10.5,29.5,14.1,45.3,11.7 c33.6-5.2,63.2-34.5,80.2-62.5c17.7-29.2,25.5-66.6,12.6-99.2c-11.9-30.3-41.3-54.6-74.1-57.8c-7.5-0.7-14.9-0.2-22.3,1.3 c-1.1,1.4-2.1,2.9-3.2,4.3c14.4-14.1,25.5-31.1,30.4-50.8c2.1-8.6,4.1-19.2,0.2-27.6c-4.7-10.1-16.4-10.2-26-9.3 c-19.2,1.8-36.8,10.5-50.9,23.5c-13.4,12.2-22.2,27-30.7,42.8c-4.8,8.8-9.5,18.2-16.2,25.7c-8.2,9.1-21.3,12.2-32.9,13.3 c-26.2,2.6-53,2.1-79.3,2.6c-53.1,1.1-106.3,1.1-159.4,0.2c-59.9-1.1-119.7-3.4-179.5-7c-1.3-0.1-3.5,2.6-4.3,3.5 C0.9,171.6-2.1,175.5-2.2,175.5L-2.2,175.5z" />
</g>
</svg>