encodeURIComponent not returns svg - javascript

Hello Guys encodeURIComponent not returns my svg.
var svg ='<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720"><defs> <pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"> <image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"/></pattern></defs><path d= M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)"/></path></svg>';
data = encodeURIComponent(svg);
below is output of returns data
%3Csvg%20id%3D%22vgroovFrame%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22576%22%20height%3D%22720%22%3E%3Cdefs%3E%20%3Cpattern%20id%3D%22matpattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22200%22%20height%3D%22200%22%20patternUnits%3D%22userSpaceOnUse%22%3E%20%3Cimage%20width%3D%22200%22%20height%3D%22200%22%20xlink%3Ahref%3D%22https%3A%2F%2Fcdn1.arttoframe.com%2Fproducts%2Fmats%2Fimages%2F200%2F61.jpg%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%20M%2082.29%2C164.57%20C%2082.29%2C164.57%20164.57%2C164.57%20164.57%2C82.29%20L%20164.57%2C82.29%20411.43%2C82.29%20C%20411.43%2C82.29%20411.43%2C164.57%20493.71%2C164.57%20L%20493.71%2C164.57%20493.71%2C555.43%20C%20493.71%2C555.43%20411.43%2C555.43%20411.43%2C637.71%20L%20411.43%2C637.71%20164.57%2C637.71%20C%20164.57%2C637.71%20164.57%2C555.43%2082.29%2C555.43%20L%2082.29%2C555.43%2082.29%2C164.57%20L%2082.29%2C164.57%200.00%2C164.57%200.00%2C0.00%200.00%2C596.57%20L%200.00%2C596.57%2082.29%2C596.57%2082.29%2C596.57%2082.29%2C596.57%20C%2082.29%2C596.57%20123.43%2C596.57%20123.43%2C637.71%20C%20123.43%2C637.71%20123.43%2C678.86%2082.29%2C678.86%20C%2082.29%2C678.86%2041.14%2C678.86%2041.14%2C637.71%20C%2041.14%2C637.71%2041.14%2C596.57%2082.29%2C596.57%20L%2082.29%2C596.57%200.00%2C596.57%200.00%2C720.00%20452.57%2C720.00%20452.57%2C637.71%20C%20452.57%2C637.71%20452.57%2C596.57%20493.71%2C596.57%20C%20493.71%2C596.57%20534.86%2C596.57%20534.86%2C637.71%20C%20534.86%2C637.71%20534.86%2C678.86%20493.71%2C678.86%20C%20493.71%2C678.86%20452.57%2C678.86%20452.57%2C637.71%20L%20452.57%2C637.71%20452.57%2C720.00%20576.00%2C720.00%20576.00%2C123.43%20493.71%2C123.43%20C%20493.71%2C123.43%20452.57%2C123.43%20452.57%2C82.29%20C%20452.57%2C82.29%20452.57%2C41.14%20493.71%2C41.14%20C%20493.71%2C41.14%20534.86%2C41.14%20534.86%2C82.29%20C%20534.86%2C82.29%20534.86%2C123.43%20493.71%2C123.43%20L%20493.71%2C123.43%20576.00%2C123.43%20576.00%2C0.00%20123.43%2C0.00%20123.43%2C82.29%20C%20123.43%2C82.29%20123.43%2C123.43%2082.29%2C123.43%20C%2082.29%2C123.43%2041.14%2C123.43%2041.14%2C82.29%20C%2041.14%2C82.29%2041.14%2C41.14%2082.29%2C41.14%20C%2082.29%2C41.14%20123.43%2C41.14%20123.43%2C82.29%20L%20123.43%2C82.29%20123.43%2C0.00%200.00%2C0.00%200.00%2C164.57%20%22%20fill%3D%22%23ff0000%3B%22%20stroke%3D%22%23f000%22%20stroke-width%3D%221px%22%20style%3D%22fill%3Aurl(%23matpattern)%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E
this is complete code
var popupMatArr = self.getPopUpMatDesign(self.configuration.popupMatStringCode,self.configuration.popupMatStringTopCode,self.configuration.popupMatStringBottomCode, self.selectedColor2, self.selectedColor3, self.configuration.popupMat_appliedMat, parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].w), parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].h));
var data1 = encodeURIComponent(popupMatArr.svg);
img = new Image();
img.src = "data:image/svg+xml;utf8," + data1;
img.onload = function() {
self.ctx.drawImage(img,
0, 0,
popupMatArr.WD,
popupMatArr.HT,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
popupMatArr.WD * self.scale,
popupMatArr.HT * self.scale,
);
}
This is Svg image before encodeURIComponent
<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720">
<defs>
<pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
<image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d=" M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)">
</path>
</svg>

Related

Dynamically color svg elements on canvas

I am trying to draw this chess piece to a Canvas element, and I want to give it a custom fill color.
I tried the following to add the svg to DOM and it worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
window.onload = function(){
const color = "#02B09F"
const svg_string = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"><g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"><path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:${color}; stroke-linejoin:miter;" id="path6570"/><path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/><path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:${color}; stroke:${color};"/><path d="M 20,8 L 25,8" style="fill:none; stroke:${color}; stroke-linejoin:miter;"/><path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/><path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/></g></svg>`
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
document.querySelector('body').appendChild(doc.firstChild)
}
</script>
</html>
but using drawImage with doc.firstChild didn't work, it gave me the following error:
CanvasRenderingContext2D.drawImage: Argument 1 could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
the code:
const color = "#02B09F"
const svg_string = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"><g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:${color}; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"><path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:${color}; stroke-linejoin:miter;" id="path6570"/><path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:${color};fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/><path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:${color}; stroke:${color};"/><path d="M 20,8 L 25,8" style="fill:none; stroke:${color}; stroke-linejoin:miter;"/><path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:#ffffff;"/><path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:#ffffff;"/></g></svg>`
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
let canvas = document.querySelector('canvas');
canvas.width = 100;
canvas.height = 100;
let cx = canvas.getContext('2d');
cx.drawImage(doc.firstChild, 0, 0)
any idea how to fix it, or if you know a better way to color SVGs using javascript

just make a function and replace the colors. test code here
function renderChess(white = '#FFFFFF', black = '#000000'){
return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="45" height="45"> <g style="fill:none; fill-opacity:1; fill-rule:evenodd; stroke:' + black + '; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;"> <path d="M 22.5,11.63 L 22.5,6" style="fill:none; stroke:' + black + '; stroke-linejoin:miter;" id="path6570"/> <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:' + black + ';fill-opacity:1; stroke-linecap:butt; stroke-linejoin:miter;"/> <path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style="fill:' + black + '; stroke:' + black + ';"/> <path d="M 20,8 L 25,8" style="fill:none; stroke:' + black + '; stroke-linejoin:miter;"/> <path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style="fill:none; stroke:' + white + ';"/> <path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style="fill:none; stroke:' + white + ';"/> </g> </svg>';
}
window.onload = function(){
const color = "#02B09F"
const svg_string = renderChess(color, 'black');
const parser = new DOMParser();
const doc = parser.parseFromString(svg_string, "image/svg+xml");
document.querySelector('body').appendChild(doc.firstChild)
}

Can you use GSAP in a wix HTML iframe element?

I have got aa animation working using HTML and javascript with GSAP, however when i implement this code as HTML content in wix for my website it fails to work?
Is it possible to use GSAP within the wix environment and if so how do I import the GSAP module?
Thanks in advance for any help!
Edit: This is the code i have trued within the HTML element:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Page Title</title>
<link rel="stylesheet" href="./style_test.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"defer></script>
<script type="text/js" defer>
let tween = gsap.from('.r', { duration: 3, y: '10%', x:'300%' })
tween.repeat(0);
</script>
<div class="container" style=
"width:100%; height: auto;
border:10px dashed black;">
<svg
id="svg5344"
version="1.1"
id="svg"
width="100%" height="auto"
viewBox="58 0 180 200"
>
<path
style="fill:none;stroke:#808080;stroke-width:0.02401723px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 85.427742,87.94295 Z"
id="path7543" />
<g
stroke="#f1dd38" stroke-width="0.3" fill="#f1dd38" fill-rule="nonzero"
class="axpro">
<path
d="m 122.69115,99.69019 q 0.25918,0.77427 0.32152,1.22702 0.0656,0.45276 -0.17388,0.68897 -0.23622,0.22966 -0.83891,0.26247 -0.60235,0.0656 -1.65648,0.0656 -1.0971,0 -1.72111,-0.0328 -0.60236,-0.0262 -0.92519,-0.0984 -0.32152,-0.0984 -0.45177,-0.29527 -0.12795,-0.16404 -0.21653,-0.45275 l -1.8717,-5.59542 h -10.45614 l -1.76409,5.44319 q -0.0886,0.29527 -0.23622,0.51509 -0.12795,0.19684 -0.45176,0.32808 -0.29856,0.0984 -0.88221,0.16404 -0.55905,0.0328 -1.48457,0.0328 -0.989493,0 -1.548871,-0.0656 -0.559378,-0.0656 -0.774927,-0.29527 -0.216533,-0.26247 -0.150917,-0.70866 0.06234,-0.45275 0.321519,-1.20406 l 8.584336,-24.69826 q 0.12795,-0.36745 0.29855,-0.5807 0.17061,-0.22966 0.53773,-0.34448 0.38713,-0.13124 1.05412,-0.16405 0.66699,-0.0328 1.76442,-0.0328 1.26935,0 2.02196,0.0328 0.75328,0.0263 1.16207,0.16405 0.43011,0.0984 0.60235,0.34448 0.19685,0.22966 0.32152,0.64632 z M 109.91164,79.27273 h -0.0427 l -3.9372,11.83322 h 7.89609 z"
/>
<path
d="m 146.40005,99.66854 q 0.38713,0.7513 0.49474,1.20405 0.12796,0.45276 -0.12795,0.68897 -0.25918,0.22966 -0.94651,0.29528 -0.66699,0.0656 -1.8717,0.0656 -1.01115,0 -1.59218,-0.0328 -0.5807,-0.0328 -0.92519,-0.13124 -0.32152,-0.0984 -0.47342,-0.29527 -0.15092,-0.16404 -0.25918,-0.42979 l -5.22787,-10.0396 -5.20655,10.04748 q -0.12795,0.26246 -0.27887,0.42978 -0.15092,0.16405 -0.49474,0.29528 -0.32152,0.0984 -0.92519,0.13123 -0.58071,0.0328 -1.5492,0.0328 -1.11876,0 -1.74277,-0.0656 -0.60235,-0.0656 -0.81757,-0.29527 -0.21654,-0.22966 -0.0853,-0.68897 0.12795,-0.45275 0.53772,-1.20406 l 6.66949,-12.15572 -6.19614,-11.42411 q -0.38713,-0.77427 -0.53772,-1.22702 -0.12795,-0.47244 0.10827,-0.68897 0.25918,-0.22966 0.92519,-0.29528 0.66698,-0.0656 1.89335,-0.0656 1.01115,0 1.59218,0.0328 0.60235,0.0328 0.94684,0.16404 0.34416,0.0984 0.47342,0.26246 0.15092,0.16404 0.27887,0.42979 l 4.88388,9.20824 4.75468,-9.20824 q 0.12795,-0.26247 0.25918,-0.42979 0.15092,-0.16404 0.45177,-0.26246 0.32152,-0.0984 0.86055,-0.16404 0.55938,-0.0328 1.52755,-0.0328 1.07578,0 1.69979,0.0656 0.62401,0.0328 0.86055,0.29528 0.23622,0.22965 0.10827,0.68897 -0.10827,0.45275 -0.47342,1.22702 l -6.19614,11.3598 z"
/>
<path
d="m 169.89379,82.41411 q 0,2.34577 -0.73129,4.15219 -0.73162,1.80772 -2.1299,3.05443 -1.39828,1.22702 -3.44229,1.87006 -2.02229,0.64632 -4.7762,0.64632 h -2.32347 v 8.88542 q 0,0.22965 -0.15092,0.38713 -0.12795,0.16404 -0.45177,0.29528 -0.32152,0.0984 -0.86055,0.16404 -0.53806,0.0656 -1.37696,0.0656 -0.81758,0 -1.37696,-0.0656 -0.53772,-0.0656 -0.86055,-0.16404 -0.32152,-0.0984 -0.45177,-0.29528 -0.12795,-0.16404 -0.12795,-0.38713 V 75.97978 q 0,-1.01049 0.5164,-1.50589 0.53805,-0.51509 1.39861,-0.51509 h 6.56191 q 0.98982,0 1.8717,0.0984 0.90354,0.0656 2.15156,0.32808 1.24769,0.22966 2.51703,0.90222 1.291,0.66601 2.19454,1.69946 0.90353,1.01049 1.37695,2.38843 0.47342,1.35497 0.47342,3.05443 z m -5.91648,0.4101 q 0,-1.46324 -0.5164,-2.40812 -0.5164,-0.94815 -1.26934,-1.39762 -0.75295,-0.45275 -1.59218,-0.56102 -0.81758,-0.13123 -1.69946,-0.13123 h -2.40942 v 9.44479 h 2.53869 q 1.3553,0 2.25883,-0.36745 0.92519,-0.36417 1.50589,-1.01049 0.58104,-0.666 0.88221,-1.57151 0.30184,-0.92518 0.30184,-2.00129 z"
/>
<path
d="m 194.97962,101.06715 q 0,0.22965 -0.0853,0.4101 -0.0853,0.16404 -0.40878,0.26246 -0.32152,0.0984 -0.94652,0.16404 -0.62368,0.0328 -1.69979,0.0328 -0.90353,0 -1.44158,-0.0328 -0.53773,-0.0328 -0.86056,-0.16404 -0.30183,-0.13123 -0.43044,-0.29527 -0.12795,-0.19685 -0.21654,-0.45275 L 186.3944,94.7739 q -0.45176,-1.05314 -0.88221,-1.87334 -0.43011,-0.81693 -0.96816,-1.35498 -0.5164,-0.56102 -1.20472,-0.83988 -0.68831,-0.29528 -1.59217,-0.29528 h -1.76409 v 10.60653 q 0,0.22966 -0.15092,0.38714 -0.12795,0.16404 -0.45177,0.29527 -0.32152,0.0984 -0.86056,0.16404 -0.53772,0.0656 -1.37695,0.0656 -0.81758,0 -1.37696,-0.0656 -0.53772,-0.0656 -0.86055,-0.16404 -0.32152,-0.0984 -0.45177,-0.29527 -0.12795,-0.16404 -0.12795,-0.38714 V 75.73766 q 0,-0.94816 0.47309,-1.35498 0.49475,-0.42978 1.20471,-0.42978 h 7.20738 q 1.09711,0 1.80707,0.0328 0.70997,0.0328 1.291,0.0984 1.67814,0.22966 3.01211,0.81692 1.35531,0.58071 2.28049,1.52886 0.94685,0.92519 1.44159,2.21455 0.49475,1.26967 0.49475,2.92648 0,1.39762 -0.36581,2.55903 -0.34416,1.14172 -1.0328,2.04394 -0.68831,0.90223 -1.69946,1.57151 -1.01115,0.66601 -2.30214,1.07611 0.62401,0.29527 1.16173,0.73162 0.55938,0.42978 1.0328,1.05314 0.49475,0.60367 0.92519,1.39762 0.43011,0.77427 0.83923,1.76508 l 2.34512,5.48617 q 0.32152,0.81692 0.43011,1.20405 0.10827,0.36745 0.10827,0.58071 z m -7.29338,-18.88992 q 0,-1.37794 -0.62401,-2.32281 -0.62368,-0.94487 -2.04394,-1.33529 -0.43044,-0.0984 -0.98982,-0.16404 -0.53772,-0.0656 -1.50589,-0.0656 h -2.53869 v 7.8956 h 2.88317 q 1.20472,0 2.10825,-0.29527 0.90354,-0.29528 1.50589,-0.81693 0.60236,-0.53805 0.90354,-1.26967 0.30183,-0.73162 0.30183,-1.63384 z"
/>
<path
d="m 223.72292,87.55579 q 0,3.46388 -0.86056,6.19614 -0.86056,2.73291 -2.56034,4.64726 -1.69979,1.89303 -4.21686,2.90352 -2.49571,0.9908 -5.78738,0.9908 -3.24866,0 -5.6798,-0.83988 -2.40943,-0.85958 -4.02316,-2.60169 -1.6135,-1.74211 -2.43108,-4.43171 -0.79593,-2.69027 -0.79593,-6.36838 0,-3.37792 0.86056,-6.0672 0.86056,-2.70995 2.56034,-4.60396 1.69979,-1.89303 4.19527,-2.90352 2.51704,-1.01049 5.83043,-1.01049 3.1627,0 5.57222,0.83989 2.43108,0.83989 4.04468,2.582 1.63516,1.74211 2.45274,4.41039 0.83923,2.64761 0.83923,6.26044 z m -5.93801,0.29527 q 0,-2.19486 -0.34415,-3.98027 -0.34416,-1.80773 -1.18339,-3.0774 -0.81758,-1.28936 -2.19453,-1.97833 -1.37696,-0.70866 -3.44226,-0.70866 -2.08692,0 -3.4854,0.79724 -1.39828,0.77427 -2.25884,2.08659 -0.86056,1.31233 -1.22637,3.0774 -0.34415,1.74211 -0.34415,3.70043 0,2.28016 0.34415,4.10921 0.34416,1.80773 1.16174,3.09709 0.81758,1.29263 2.19453,1.97832 1.37696,0.66601 3.46388,0.66601 2.08692,0 3.4853,-0.77427 1.39861,-0.77427 2.25917,-2.10956 0.86055,-1.33529 1.20471,-3.09709 0.36614,-1.78476 0.36614,-3.78638 z"
/>
</g>
<g
class="sounder">
<path
class="inner"
id="circle7537"
d="m 88.550781,68.023438 a 1.4062634,1.4062634 0 0 0 -0.101562,2.800781 c 2.626503,0.360204 5.027306,1.670173 6.751953,3.683593 a 1.4062634,1.4062634 0 1 0 2.136719,-1.828124 c -2.171963,-2.535634 -5.200082,-4.186996 -8.507813,-4.640626 a 1.4062634,1.4062634 0 0 0 -0.279297,-0.01562 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.70588235;fill-rule:nonzero;stroke:none;stroke-width:2.81224561;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
class="middle"
id="circle7539"
d="m 89.199219,62.269531 a 1.4062608,1.4062608 0 0 0 -0.203125,2.804688 c 4.079113,0.499853 7.82794,2.493814 10.521484,5.597656 a 1.4062608,1.4062608 0 1 0 2.123042,-1.84375 C 98.491407,65.199198 94.107077,62.865664 89.337891,62.28125 a 1.4062608,1.4062608 0 0 0 -0.138672,-0.01172 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.39215686;fill-rule:nonzero;stroke:none;stroke-width:2.81224036;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
class="outer"
id="circle7541"
d="m 89.714844,56.46875 a 1.4062608,1.4062608 0 0 0 -0.179688,2.806641 c 5.544575,0.636624 10.650814,3.315944 14.324224,7.517578 a 1.4063016,1.4063016 0 1 0 2.11718,-1.851563 c -4.1335,-4.727896 -9.882048,-7.744574 -16.121091,-8.460937 a 1.4062608,1.4062608 0 0 0 -0.140625,-0.01172 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.19607843;fill-rule:nonzero;stroke:none;stroke-width:2.81224036;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
</g>
<g
class="r">
<path
d="m 95.755245,101.05796 q 0,0.22966 -0.08858,0.41338 -0.08858,0.16404 -0.408132,0.26247 -0.32152,0.0984 -0.946842,0.16404 -0.623682,0.0328 -1.699459,0.0328 -0.903863,0 -1.44126,-0.0328 -0.537724,-0.0328 -0.860884,-0.16404 -0.298554,-0.13123 -0.430114,-0.29528 -0.127952,-0.19684 -0.216534,-0.45603 l -2.495383,-6.28275 q -0.451768,-1.06626 -0.88221,-1.89302 -0.430442,-0.82677 -0.967839,-1.3681 -0.516727,-0.5643 -1.204713,-0.84645 -0.688642,-0.29527 -1.592176,-0.29527 h -1.76442 v 10.71742 q 0,0.22965 -0.150917,0.39041 -0.127951,0.16404 -0.451767,0.29528 -0.32152,0.0984 -0.860557,0.16404 -0.538052,0.0656 -1.376627,0.0656 -0.817578,0 -1.376956,-0.0656 -0.537725,-0.0656 -0.860556,-0.16404 -0.3248,-0.0984 -0.452096,-0.29528 -0.127951,-0.16404 -0.127951,-0.39041 V 75.47027 q 0,-0.95799 0.473421,-1.36809 0.495074,-0.43635 1.205041,-0.43635 h 7.207446 q 1.097102,0 1.807069,0.0328 0.710296,0.0328 1.290999,0.0984 1.678134,0.22966 3.012111,0.82676 1.355302,0.58727 2.280162,1.54527 0.946842,0.93503 1.441588,2.23751 0.494746,1.28279 0.494746,2.95601 0,1.41403 -0.366466,2.58527 -0.34547,1.15157 -1.032799,2.06691 -0.688314,0.91207 -1.699459,1.58792 -1.011146,0.67256 -2.301816,1.08594 0.623682,0.29528 1.161406,0.73819 0.559378,0.43306 1.032799,1.06626 0.494418,0.61023 0.925188,1.41403 0.430114,0.78083 0.838903,1.78148 l 2.345123,5.54358 q 0.3248,0.82676 0.430114,1.21718 0.108267,0.37073 0.108267,0.58727 z M 88.46158,81.97054 q 0,-1.39106 -0.623682,-2.34906 -0.62401,-0.958 -2.044273,-1.34841 -0.430114,-0.0984 -0.98982,-0.16404 -0.538052,-0.0656 -1.505891,-0.0656 h -2.53869 v 7.9786 h 2.883175 q 1.204713,0 2.108248,-0.29527 0.903535,-0.29527 1.505891,-0.82677 0.602357,-0.54461 0.903863,-1.28279 0.298554,-0.73818 0.298554,-1.65353 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Calibri;-inkscape-font-specification:'Calibri Bold';letter-spacing:0px;word-spacing:0px;fill:#f1dd38;fill-opacity:1;stroke:none;stroke-width:1.1072911"
id="path3902" />
</g>
<g
transform="matrix(0.95843056,0,0,1.0433724,0,-87)"
stroke="#f1dd38" stroke-width="0.3" fill="#f1dd38" fill-rule="nonzero"
class="alert">
<path
d="m 135.66174,200.65343 q 0.1347,0.4041 0.16838,0.63983 0.0337,0.23573 -0.0898,0.35921 -0.12348,0.11225 -0.43779,0.1347 -0.3143,0.0337 -0.86434,0.0337 -0.57248,0 -0.89801,-0.0225 -0.31431,-0.0112 -0.48268,-0.0561 -0.16838,-0.0561 -0.23573,-0.14593 -0.0673,-0.0898 -0.11226,-0.23573 l -0.97659,-2.91855 h -5.45544 l -0.92046,2.83998 q -0.0449,0.15715 -0.12348,0.2694 -0.0674,0.10103 -0.23573,0.16838 -0.15715,0.0561 -0.46023,0.0786 -0.29186,0.0225 -0.77454,0.0225 -0.51636,0 -0.80821,-0.0337 -0.29186,-0.0337 -0.40411,-0.15715 -0.11225,-0.13471 -0.0786,-0.37043 0.0337,-0.23573 0.16837,-0.62861 l 4.47885,-12.88652 q 0.0673,-0.19083 0.15715,-0.30308 0.0898,-0.12348 0.28063,-0.1796 0.20206,-0.0673 0.55004,-0.0786 0.34798,-0.0224 0.92046,-0.0224 0.66229,0 1.05517,0.0224 0.39288,0.0112 0.60616,0.0786 0.22451,0.0561 0.31431,0.1796 0.10102,0.12348 0.16837,0.33676 z m -6.66776,-10.65271 h -0.0112 l -2.05421,6.17386 h 4.11965 z"
/>
<path
d="m 147.73757,200.51872 q 0,0.33676 -0.0337,0.57249 -0.0224,0.2245 -0.0786,0.38165 -0.0561,0.14593 -0.14593,0.21328 -0.0786,0.0674 -0.19082,0.0674 h -6.65654 q -0.37043,0 -0.62861,-0.21327 -0.24695,-0.22451 -0.24695,-0.71842 v -13.18959 q 0,-0.11225 0.0674,-0.20205 0.0786,-0.0898 0.24695,-0.14593 0.16838,-0.0561 0.44901,-0.0898 0.29185,-0.0337 0.71841,-0.0337 0.43778,0 0.71841,0.0337 0.28063,0.0337 0.44901,0.0898 0.16838,0.0561 0.23573,0.14593 0.0786,0.0898 0.0786,0.20205 v 11.68542 h 4.56865 q 0.11225,0 0.19082,0.0674 0.0898,0.0561 0.14593,0.20205 0.0561,0.13471 0.0786,0.37043 0.0337,0.22451 0.0337,0.56126 z"
/>
<path
d="m 160.18384,200.5973 q 0,0.32553 -0.0337,0.55003 -0.0224,0.21328 -0.0786,0.34798 -0.0561,0.13471 -0.14593,0.20206 -0.0786,0.0561 -0.1796,0.0561 h -7.29637 q -0.37044,0 -0.62862,-0.21327 -0.24695,-0.22451 -0.24695,-0.71842 v -12.66201 q 0,-0.4939 0.24695,-0.70718 0.25818,-0.22451 0.62862,-0.22451 h 7.25147 q 0.10102,0 0.1796,0.0561 0.0786,0.0561 0.1347,0.20205 0.0561,0.1347 0.0786,0.35921 0.0337,0.21328 0.0337,0.55003 0,0.31431 -0.0337,0.53881 -0.0225,0.21328 -0.0786,0.34798 -0.0561,0.1347 -0.1347,0.20206 -0.0786,0.0561 -0.1796,0.0561 h -5.18604 v 3.54716 h 4.38905 q 0.10102,0 0.1796,0.0674 0.0898,0.0561 0.14593,0.19083 0.0561,0.12348 0.0786,0.34798 0.0337,0.21328 0.0337,0.52758 0,0.32553 -0.0337,0.53881 -0.0224,0.21328 -0.0786,0.34798 -0.0561,0.12348 -0.14593,0.17961 -0.0786,0.0561 -0.1796,0.0561 h -4.38905 v 4.0972 h 5.23094 q 0.10102,0 0.1796,0.0674 0.0898,0.0561 0.14593,0.19083 0.0561,0.1347 0.0786,0.3592 0.0337,0.21328 0.0337,0.53881 z"
/>
<path
d="m 175.64968,201.37184 q 0,0.12347 -0.0449,0.21328 -0.0449,0.0786 -0.21328,0.1347 -0.16838,0.0561 -0.49391,0.0786 -0.32553,0.0225 -0.88679,0.0225 -0.47146,0 -0.75209,-0.0225 -0.28063,-0.0225 -0.449,-0.0786 -0.15716,-0.0674 -0.22451,-0.15715 -0.0673,-0.10103 -0.11225,-0.23573 l -1.30212,-3.24408 q -0.23573,-0.55004 -0.46023,-0.97659 -0.22451,-0.42656 -0.50514,-0.70719 -0.2694,-0.29185 -0.62861,-0.43778 -0.3592,-0.14593 -0.83066,-0.14593 h -0.92047 v 5.53402 q 0,0.11225 -0.0786,0.20205 -0.0674,0.0898 -0.23573,0.14593 -0.16838,0.0561 -0.44901,0.0898 -0.28063,0.0337 -0.71841,0.0337 -0.42656,0 -0.71841,-0.0337 -0.28063,-0.0337 -0.44901,-0.0898 -0.16838,-0.0561 -0.23573,-0.14593 -0.0674,-0.0898 -0.0674,-0.20205 v -13.1896 q 0,-0.4939 0.24695,-0.70718 0.25818,-0.22451 0.62861,-0.22451 h 3.76044 q 0.57249,0 0.94292,0.0224 0.37043,0.0224 0.67351,0.0561 0.87556,0.12348 1.57152,0.42656 0.70719,0.30308 1.18987,0.79698 0.49391,0.48269 0.75209,1.1562 0.25818,0.66228 0.25818,1.52662 0,0.72964 -0.19083,1.3358 -0.1796,0.59494 -0.53881,1.06639 -0.3592,0.47146 -0.88679,0.81944 -0.52758,0.34798 -1.20109,0.56126 0.32553,0.15715 0.60616,0.38166 0.29185,0.2245 0.53881,0.55003 0.25818,0.31431 0.48268,0.72964 0.22451,0.40411 0.43778,0.92046 l 1.22355,2.86243 q 0.16838,0.42655 0.2245,0.62861 0.0561,0.19083 0.0561,0.30308 z m -3.80534,-9.85572 q 0,-0.71841 -0.32553,-1.21232 -0.32553,-0.4939 -1.06639,-0.69596 -0.22451,-0.0561 -0.51636,-0.0898 -0.28063,-0.0337 -0.78576,-0.0337 h -1.32458 v 4.11964 h 1.50418 q 0.62861,0 1.10007,-0.14593 0.47145,-0.15715 0.78576,-0.42656 0.31431,-0.28063 0.47146,-0.66228 0.15715,-0.38166 0.15715,-0.85312 z"
/>
<path
d="m 189.31949,188.44042 q 0,0.32553 -0.0337,0.56126 -0.0224,0.22451 -0.0786,0.37043 -0.0561,0.13471 -0.14593,0.20206 -0.0786,0.0674 -0.1796,0.0674 h -3.63696 v 11.70787 q 0,0.11225 -0.0786,0.20205 -0.0674,0.0898 -0.23573,0.14593 -0.16838,0.0561 -0.46023,0.0898 -0.28063,0.0337 -0.70719,0.0337 -0.42655,0 -0.71841,-0.0337 -0.28063,-0.0337 -0.44901,-0.0898 -0.16837,-0.0561 -0.24695,-0.14593 -0.0674,-0.0898 -0.0674,-0.20205 v -11.70787 h -3.63696 q -0.11225,0 -0.19083,-0.0674 -0.0786,-0.0674 -0.1347,-0.20206 -0.0561,-0.14592 -0.0898,-0.37043 -0.0224,-0.23573 -0.0224,-0.56126 0,-0.33675 0.0224,-0.57248 0.0337,-0.23573 0.0898,-0.37043 0.0561,-0.14593 0.1347,-0.20206 0.0786,-0.0673 0.19083,-0.0673 h 10.23737 q 0.10102,0 0.1796,0.0673 0.0898,0.0561 0.14593,0.20206 0.0561,0.1347 0.0786,0.37043 0.0337,0.23573 0.0337,0.57248 z"
/>
</g>
<g
stroke="#f8ed98" stroke-width="0.3" fill="#f8ed98" fill-rule="nonzero"
class="line">
<path
d="m 74.779297,106.37891 v 1.03906 H 224.04492 v -1.03906 z"
id="path53" />
<path
d="m 74.779297,124.72656 v 1.03906 H 224.04492 v -1.03906 z"
id="path53-8" />
</g>
</svg>
</div>
</body>
</html>

AnimeJS Progressive Fill of an SVG path

I have an SVG with different paths, and I want to animate the "fill" of these paths so it looks like it's being "hand drawn".
So far i Feel like I'm pretty close using the "strokeDashoffset" of anime.js, but I don't want the "borders" to be animated, I want the inside
Here's what I have :
JS :
var cssSelector = anime({
targets: '#cssSelector .lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: false
});
SVG/html
<div id="cssSelector">
<svg
width="100%"
height="auto"
viewBox="0 0 122.84119 21.053778">
<g
transform="translate(-44.718109,-94.290359)">
<g
fill="#FFF" fill-rule="evenodd" stroke="currentColor" stroke-width="0.1" class="lines" stroke-linecap="round"
id="text12">
<path
d="m 44.718109,95.475692 h 1.439333 v 19.755558 h -1.439333 z"
style=""
id="path14" />
<path
d="m 59.899459,114.29991 q -0.536222,0.508 -1.354666,0.79023 -0.790222,0.254 -1.665111,0.254 -1.919111,0 -2.963334,-1.04423 -1.044222,-1.07244 -1.044222,-2.96333 v -9.62378 h -2.709333 v -1.21355 h 2.709333 v -3.217336 h 1.411111 v 3.217336 h 4.684889 v 1.21355 h -4.684889 v 9.48267 q 0,1.43933 0.677334,2.20133 0.705555,0.73378 2.060222,0.73378 1.382889,0 2.286,-0.81844 z"
style=""
id="path16" />
<path
d="m 97.978291,95.475692 -6.688667,19.755558 h -1.524 L 83.641402,97.507692 77.488958,115.23125 h -1.524 L 69.24807,95.475692 h 1.523999 l 6.011334,17.779998 6.180666,-17.779998 h 1.382889 l 6.152444,17.808218 6.067778,-17.808218 z"
style=""
id="path18" />
<path
d="m 106.30297,115.34414 q -2.08845,0 -3.78178,-0.95956 -1.66511,-0.95956 -2.624668,-2.65289 -0.959556,-1.72155 -0.959556,-3.86644 0,-2.14489 0.959556,-3.83822 0.959558,-1.72156 2.624668,-2.68112 1.69333,-0.95955 3.78178,-0.95955 2.08844,0 3.75355,0.95955 1.69333,0.95956 2.65289,2.68112 0.95956,1.69333 0.95956,3.83822 0,2.14489 -0.95956,3.86644 -0.95956,1.69333 -2.65289,2.65289 -1.66511,0.95956 -3.75355,0.95956 z m 0,-1.27 q 1.69333,0 3.01977,-0.79023 1.35467,-0.79022 2.11667,-2.20133 0.79022,-1.41111 0.79022,-3.21733 0,-1.80622 -0.79022,-3.21734 -0.762,-1.41111 -2.11667,-2.20133 -1.32644,-0.79022 -3.01977,-0.79022 -1.69334,0 -3.048,0.79022 -1.32645,0.79022 -2.11667,2.20133 -0.762,1.41112 -0.762,3.21734 0,1.80622 0.762,3.21733 0.79022,1.41111 2.11667,2.20133 1.35466,0.79023 3.048,0.79023 z"
style=""
id="path20" />
<path
d="m 119.37382,103.71658 q 0.67733,-1.60867 2.11667,-2.45533 1.43933,-0.87489 3.49955,-0.87489 v 1.38289 l -0.33866,-0.0282 q -2.45534,0 -3.83823,1.55222 -1.38288,1.524 -1.38288,4.26155 v 7.67645 h -1.41112 v -14.732 h 1.35467 z"
style=""
id="path22" />
<path
d="m 134.12743,107.35725 -3.83822,3.49955 v 4.37445 h -1.41112 V 94.290359 h 1.41112 v 14.816661 l 9.42622,-8.60777 h 1.80622 l -6.35,5.95489 6.97089,8.77711 h -1.74978 z"
style=""
id="path24" />
<path
d="m 148.75404,115.34414 q -1.778,0 -3.38667,-0.53623 -1.60866,-0.53622 -2.51177,-1.35466 l 0.64911,-1.12889 q 0.90311,0.762 2.31422,1.27 1.43933,0.508 2.99155,0.508 2.22956,0 3.27378,-0.73378 1.07245,-0.73378 1.07245,-2.032 0,-0.93133 -0.59267,-1.46756 -0.56444,-0.53622 -1.41111,-0.79022 -0.84667,-0.254 -2.34245,-0.53622 -1.74977,-0.31044 -2.82222,-0.67733 -1.07244,-0.36689 -1.83444,-1.18534 -0.762,-0.81844 -0.762,-2.25777 0,-1.74978 1.43933,-2.87867 1.46756,-1.15711 4.14867,-1.15711 1.41111,0 2.794,0.39511 1.38289,0.39511 2.25778,1.04422 l -0.64912,1.12889 q -0.90311,-0.64911 -2.06022,-0.98778 -1.15711,-0.33866 -2.37066,-0.33866 -2.06023,0 -3.10445,0.762 -1.04422,0.762 -1.04422,2.00377 0,0.98778 0.59267,1.55223 0.59266,0.53622 1.43933,0.81844 0.87489,0.254 2.42711,0.56444 1.72156,0.31045 2.76578,0.67734 1.07244,0.33866 1.80622,1.12889 0.73378,0.79022 0.73378,2.17311 0,1.83444 -1.524,2.93511 -1.524,1.10067 -4.28978,1.10067 z"
style=""
id="path26" />
<path
d="m 165.55552,95.475692 h 1.63689 l -0.28222,14.082888 h -1.07245 z m 0.81845,19.868448 q -0.47978,0 -0.81845,-0.33867 -0.33866,-0.33867 -0.33866,-0.81845 0,-0.47977 0.33866,-0.81844 0.33867,-0.33867 0.81845,-0.33867 0.508,0 0.84666,0.33867 0.33867,0.33867 0.33867,0.81844 0,0.47978 -0.33867,0.81845 -0.33866,0.33867 -0.84666,0.33867 z"
style=""
id="path28" />
</g>
</g>
</svg>
</div>
And here's the result (after the animation)
My first idea was to draw the stroke inside of the element with a big "stroke-width", but appearently there's nothing to do so.
Thanks for your help and sorry for bad english :)

Apparently there is no way to do it with pure CSS. ended up following this tutorial and it worked Great
https://medium.com/#anatacreative/handwriting-animation-with-svg-638931410cfa

filling space in svg width path

I'm making an svg using a path and I'm having issues getting the path to fill the space within the svg itself.
Here's an example
https://jsfiddle.net/k44y4b9L/2/
As you can see, the svg is viewBox is set to the same width as the last point in the svg, both are 1366
To my thinking, that means that the path should take up the full width of the svg, but it isn't.
In my actual site, the svg is given the width of the window
<svg height="119" width="1366">
<path...
Can somebody explain why the svg path is not filling the space provided and how to get it to do so?
Note, the svg is the full width of the screen, it is just the path which falls short.
I make the svg via the below script, but I'm thinking the issue is not in the script because the last value in the path is equal to the total width of the svg
for(let i = 0; i< points.length; i++) {
track = track + (points[i].distance / totalDistance) * layout.width + ' ' +
((maxHeight - points[i].height) / rangeHeight ) * svgHeight + ' L ';
}
return {
track: track = track + layout.width + ' ' + rangeHeight + ' L 0 ' + rangeHeight
}
});

I suspect the script is the problem. The last data point in the plot is at
L 1314.6117266886256 77.66199637121403
before the the graph dives down screen to
L 1366 1535.7468222475618
and back to
L 0, 1535.7468222475618
so the fill will work. Currently the plummet in the plot is clipped by the view port so it looks like it's vertical and as if the graph cuts off at x = 1314, whereas it doesn't and continues to x=1366. This can be demonstrated by changing the view port height to several thousand and removing the height attribute on the svg tag.
Why the script doesn't plot a data point at 1366 is unclear - I would expect the distance represented by points[points.length-1].distance would be the same as totalDistance. Perhaps some judicious logging will clear up the matter.
Note that use of the unscaled rangeHeight value (unrelated to svg dimensions) can be replaced by svgHeight when completing path data as for example:
return {
track: track = track + layout.width + ' ' + svgHeight + ' L 0 ' + svgHeight
}

That's because you are slicing your path on the y axis.
y values go down to 1535, and your viewBox stops at 120. You then have all the way down to y:1535 in diagonal that goes from x~=1320, y=120 to x:1366, y:1535 that get hidden in your image, but which is still part of the BBox.
So you just have to fix the y value in your viewBox and to add preserveAspectRatio="none" in order to stretch your path.
svg{ border: 1px solid}
<svg width="100%" height="119.1" viewbox="0 0 1366 1535.7468222475618" preserveAspectRatio="none"><path fill="blue" d="M 0 93.6895418127642 L 2.665123367659168 94.90951776684683 L 4.2895612672752135 95.15586786527933 L 5.204138083194765 95.52176851940251 L 7.7378161096114955 95.4968606554659 L 11.796534397512328 94.86507944410728 L 14.9873069580359 95.05820497877262 L 16.756067470338387 94.77967748096344 L 18.421891072530475 95.16810832132134 L 19.88958479564756 95.45663219779111 L 22.634942167376725 95.88126715542622 L 26.184890456874864 95.57351845480213 L 28.587916433168083 96.01081520391392 L 31.199511238479634 95.3382488653906 L 33.38809911206268 94.66131221953057 L 36.617723255618394 93.85346911989356 L 37.65906382915835 93.50822794622684 L 43.29465530719694 91.94007945222616 L 45.716759684221024 90.95158454736118 L 46.23418125941004 90.65919298964516 L 49.255795487153705 91.11934266396851 L 53.89271252054174 91.37524000592352 L 59.55509369824439 89.76761365783392 L 74.71239046154567 86.85588402071572 L 76.3156550476323 86.59673916397207 L 77.76213912056488 87.33267957936282 L 79.15299880688353 86.79470361982295 L 80.95990641532082 84.97713718709238 L 82.90222743583448 85.71152051204957 L 87.53337570384602 84.31175142512346 L 115.9785644393456 75.83435851234935 L 132.00356781551105 70.47999085360084 L 133.58937876896545 70.10454286234689 L 133.95732529432212 70.25745852331632 L 136.67945834452576 70.3768657869749 L 138.5576884937648 70.56735065592682 L 139.82273892809195 70.03075226943392 L 142.9898781345473 68.5799541971048 L 145.95202507835424 69.29762420428824 L 150.50894185058112 67.43118085972195 L 154.62159634599612 66.68568032640702 L 169.53919747246763 59.59184397837285 L 172.34408940163092 59.76661681324125 L 179.41323957617433 54.23712395717909 L 183.18452899857706 55.40387210153476 L 184.0517824411765 55.29838465800259 L 198.08060711429832 48.21844941522161 L 201.9903786283023 48.704890678403935 L 202.48752991273093 48.49738248187275 L 204.34662118685745 47.41276016266789 L 205.01124027256498 46.990440798310104 L 205.49659566406584 46.518242556207255 L 206.8418394859621 46.08028132180215 L 210.03951819735218 43.87559690008509 L 212.338584260495 42.21410052551513 L 215.13428901896637 40.00206616499397 L 216.22883500849494 39.271020348363514 L 217.94960418760922 38.15087869545533 L 218.56074500765445 38.19452386431356 L 221.3801994932312 36.592252387318595 L 223.30002523442425 36.93992956021575 L 224.10404241236913 36.791248671214916 L 224.71071496536376 36.47391294902361 L 228.41149727226718 36.85678910758367 L 228.75425359524786 36.894877630415635 L 230.54735298302236 36.25746535877406 L 233.78344097837038 34.139991745198586 L 234.93588064029692 33.38848346925461 L 238.5468723380036 33.624154282406906 L 239.31506808990252 33.60244405886698 L 243.79898809077113 32.684517066199525 L 250.6593160723187 32.676748323928244 L 252.17318560940996 32.304214919317666 L 254.00342960748807 32.59333023011129 L 258.2276619957761 32.72851732000699 L 259.97230778182046 33.099291548809354 L 265.4090892850939 33.75428998833749 L 267.0635669446066 33.73377259828705 L 270.52300329337686 33.192374901844545 L 285.48309832360417 30.122683953308066 L 290.5227384353614 29.85905415149619 L 295.25893355417685 30.958678966322548 L 301.4502335605041 31.136185693487686 L 306.8208117842427 31.57304886360337 L 339.47192403440647 28.060679864829428 L 342.1449661049091 27.794486617474085 L 353.9323391224938 25.37009416334379 L 356.6018605192946 24.82921719693516 L 359.64767048445555 24.181681318588037 L 362.57780656478553 23.755884739419958 L 363.65249511822043 23.3515193287727 L 368.2120398933081 21.942193470917374 L 370.35649976050325 21.69368310986994 L 373.99343835721373 20.80390792873542 L 376.414161449733 20.297356339910245 L 376.787157865503 20.246882130423856 L 377.6205065246026 20.100203758158866 L 380.0060469073525 19.644098789164627 L 382.2442022192896 18.49717114163059 L 383.9720543154379 17.954255448859406 L 384.9379270536342 17.582345963166865 L 387.21871501577016 17.46355040252647 L 398.5817348795498 15.744955757669509 L 403.7694228757952 14.455680750218848 L 407.08599127831803 13.303027478807884 L 410.1646026186511 13.273746609992454 L 429.2129721545638 9.461786592069828 L 447.0134203224187 8.161005374319608 L 448.60778248355723 7.645924358835366 L 468.6327826995717 7.981351456431004 L 475.32330845699545 5.70710018647154 L 483.34724799131357 2.4489215203781627 L 498.8456289249868 5.760337773520393 L 499.67912261812467 5.537475774374966 L 505.7973512825049 7.83719544468438 L 511.9666885977891 4.8031686551094674 L 517.9090181061771 0 L 526.388911295637 3.746907359885273 L 530.0474682624499 5.531335897259933 L 533.6831685801574 6.7096555767811905 L 538.4312447068208 4.437323229797208 L 542.5155236808126 3.5935567127955332 L 548.0622665277615 6.694405957766618 L 555.368489359055 7.413294398771164 L 557.4986740798215 7.816979560350507 L 558.9051301230962 8.424058923225747 L 562.2743827363502 9.91972842233779 L 564.8259341029334 11.289955040436165 L 565.8119813104888 11.926112522978205 L 568.9568656616074 14.030254441031873 L 573.1827172987125 14.828825421693766 L 578.3785767455453 15.334117293663994 L 584.1515464253678 14.064073191170861 L 586.1728574199217 14.122703467730394 L 587.2977423590918 14.251599444958874 L 588.3738791103115 14.600886272848552 L 590.7752256255633 15.337302161105766 L 591.0649543950095 15.414279874259574 L 593.2364141814209 16.467370584845725 L 596.378658509884 18.804552245216243 L 598.6429172973552 20.07477362660744 L 601.1344308324669 20.1395124966016 L 604.9756672147997 19.424378997691218 L 609.6324294777376 19.278439992334462 L 614.1807345210082 18.854040532043992 L 616.177704194166 18.915110878874664 L 622.3401206580357 18.813564909394568 L 624.6527893862285 18.346742657988273 L 625.7190437085152 18.03998714571526 L 629.2447187238298 18.108664956966145 L 632.0310154758156 19.41404894077666 L 634.4641695555704 21.67012042804931 L 635.481932256133 22.393744083780668 L 638.4559888575782 23.080603444933192 L 641.510901615907 25.468831984343865 L 644.6931156109835 27.06003438171469 L 646.700214681451 27.255658620829642 L 648.7975316593405 26.457704119074755 L 650.0947372687093 26.249000064662255 L 654.2635056995479 26.766110291551744 L 658.6312548121922 26.878056186067017 L 660.1225340577158 26.71879173768677 L 663.628713091155 26.455229068371217 L 667.4946606070508 26.163112801685955 L 669.9542581756274 27.303327863722238 L 677.0127917345734 27.13578451581777 L 684.8122456915586 28.020605418766433 L 689.7482589536 27.51562718982995 L 714.3428542269559 28.408487848798977 L 720.6124214544949 31.549115632008036 L 727.2114778228455 35.106569937273385 L 762.1185692296282 46.632774046529136 L 767.2524456752058 48.29894920704799 L 773.5629096514042 49.16365256299842 L 783.0820469695753 52.066317725578976 L 784.0033625779054 52.25121726808711 L 784.6107537596346 51.95598265202461 L 788.0726344863083 52.668067310098444 L 791.5166114383851 52.6930444750226 L 793.3492301858332 52.512724089873835 L 794.5698293956268 52.935715239517755 L 796.2374281679132 52.97432361876515 L 798.9351287733825 53.31397459181399 L 802.5416921350363 55.960507656235045 L 805.5781878322663 56.881157044145716 L 814.3287318917567 56.854790401935716 L 817.0000157817514 58.83045675263215 L 821.5595291296794 60.738787981228306 L 832.9692771556078 65.43466237763657 L 837.5475956866258 66.86841046711476 L 847.7564099756963 67.6362510578752 L 864.5970910744117 67.91874478579993 L 898.6022006693901 78.3141373971703 L 924.1257060529387 81.34734144959816 L 936.115659825146 81.66373244937131 L 952.5395355813768 83.38818295913383 L 966.8920484489237 87.02866001977004 L 985.1491169788279 86.48653833949837 L 991.5416555933199 90.11737233685511 L 1004.3271437352008 92.04441229714145 L 1017.3658624262649 89.70632037960343 L 1023.3508172604021 89.90279816847024 L 1027.4687085173787 91.99284340733254 L 1028.4793059461576 92.05061541340609 L 1028.952486787462 92.09072831613449 L 1031.3174185577661 92.34885505963966 L 1033.4641770257906 93.69325656737531 L 1039.1505247860423 96.64667935969715 L 1043.060166795977 98.41294343913069 L 1046.8703354819286 100.22445436749487 L 1056.7636732583996 99.70763382706583 L 1066.819054032742 97.95914505968518 L 1070.4724832649208 96.66304486664104 L 1077.3502579049352 95.73100889092025 L 1083.694606401379 94.89703781395599 L 1092.3619875058187 95.05023846894626 L 1100.602904117155 91.2927544872155 L 1104.0257739645165 88.54922961637493 L 1116.543854149713 87.01515463815245 L 1127.5402475931287 87.59694953569955 L 1135.6793875687938 85.8789496263917 L 1146.6435673479255 88.70567080072436 L 1156.7145425214592 91.49476558759186 L 1177.0857006728386 104.1 L 1179.8523304540697 103.72101909178603 L 1180.048674351256 103.74069081403994 L 1185.106175192035 102.6473473570614 L 1210.6440269758577 95.52478673869703 L 1219.6809408711752 93.73918640283988 L 1240.518031099135 90.02964304369375 L 1280.3576814932712 82.33568355595172 L 1294.6106145311173 80.6754493779673 L 1314.6117266886256 77.66199637121403 L 1366 1535.7468222475618 L 0 1535.7468222475618"></path></svg>

Problems converting Fireworks exported SVG to Raphaël

I'm trying to convert the following SVG into a Raphaël generated version with an animation:
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks 10, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 100 111" style="background-color:#00ff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="100px" height="111px"
>
<defs>
<!-- Library -->
<symbol id="Symbol7" overflow="visible">
<g id="Layer%2012">
<rect opacity="0.102" visibility="hidden" x="-68" y="-68" width="136" height="136" fill="#00ff00"/>
<path d="M 1.964 8.4182 C 1.964 8.4182 -1.9607 7.3584 -4.8882 4.2425 C -7.8613 1.0781 -9.5322 -3.5466 -9.5322 -3.5466 C -9.5322 -3.5466 -22.138 4.0587 -28.0532 13.8565 C -33.8893 23.5231 -37.5239 30.9637 -37.2234 33.1765 C -36.9248 35.3741 -37.1771 36.8259 -31.7543 36.0133 C -26.3864 35.2091 -14.8159 27.574 -10.2729 23.8916 C -5.7305 20.2096 1.7584 11.2903 1.964 8.4182 Z" fill="#00ff00"/>
<path d="M -1.9046 8.9519 C -1.9046 8.9519 -4.8987 8.475 -6.9209 6.2908 C -8.9745 4.0727 -9.8701 0.5879 -9.8701 0.5879 C -9.8701 0.5879 -20.4872 7.7134 -26.0352 15.9551 C -31.5089 24.0864 -35.0469 30.2674 -35.0112 31.9801 C -34.9758 33.6811 -35.3063 34.8456 -30.9624 33.714 C -26.6625 32.5939 -16.8578 25.5391 -12.946 22.2308 C -9.0346 18.9229 -2.3273 11.229 -1.9046 8.9519 Z" fill="#ffffff"/>
<path d="M -8.9652 -2.9558 C -8.9652 -2.9558 -6.085 -5.8247 -1.9229 -6.8021 C 2.3041 -7.7946 7.1447 -6.9294 7.1447 -6.9294 C 7.1447 -6.9294 6.8612 -21.6489 1.3337 -31.6706 C -4.1198 -41.558 -8.7462 -48.4261 -10.8128 -49.2722 C -12.8653 -50.1124 -13.9965 -51.0568 -16.0041 -45.9543 C -17.9916 -40.9034 -17.1647 -27.0654 -16.2471 -21.2899 C -15.3297 -15.5151 -11.3498 -4.5699 -8.9652 -2.9558 Z" fill="#00ff00"/>
<path d="M -7.4931 -6.5729 C -7.4931 -6.5729 -5.5831 -8.9275 -2.6805 -9.5866 C 0.2674 -10.256 3.7331 -9.2893 3.7331 -9.2893 C 3.7331 -9.2893 2.8708 -22.0467 -1.4928 -30.9723 C -5.7979 -39.7782 -9.3818 -45.9327 -10.8828 -46.7582 C -12.3736 -47.578 -13.2169 -48.4465 -14.4088 -44.1188 C -15.5888 -39.8349 -14.3814 -27.8164 -13.4723 -22.7745 C -12.5632 -17.7332 -9.2538 -8.0776 -7.4931 -6.5729 Z" fill="#ffffff"/>
<path d="M 6.2399 -7.148 C 6.2399 -7.148 7.2844 -3.2192 6.0497 0.874 C 4.7958 5.0309 1.6261 8.7904 1.6261 8.7904 C 1.6261 8.7904 14.5154 15.9046 25.9582 16.1285 C 37.2477 16.3494 45.5088 15.7768 47.2748 14.4101 C 49.0288 13.0527 50.4122 12.5453 46.9971 8.2553 C 43.6167 4.0087 31.2192 -2.1941 25.7587 -4.2872 C 20.2987 -6.3801 8.83 -8.4061 6.2399 -7.148 Z" fill="#00ff00"/>
<path d="M 8.6363 -4.0646 C 8.6363 -4.0646 9.7204 -1.2332 8.84 1.6102 C 7.9458 4.4977 5.3757 7.0158 5.3757 7.0158 C 5.3757 7.0158 16.8551 12.6477 26.7666 13.3315 C 36.5454 14.0062 43.6673 13.9797 45.1327 13.0925 C 46.5881 12.2113 47.7618 11.9153 44.6099 8.7192 C 41.4899 5.5554 30.4779 0.5917 25.6569 -1.1419 C 20.8365 -2.8753 10.8198 -4.837 8.6363 -4.0646 Z" fill="#ffffff"/>
</g>
</symbol>
<!-- End Library -->
</defs>
<g id="Layer%201">
<path id="Ellipse" d="M 43.522 49.8713 C 43.522 46.5576 46.2082 43.8713 49.522 43.8713 C 52.8357 43.8713 55.522 46.5576 55.522 49.8713 C 55.522 53.1851 52.8357 55.8713 49.522 55.8713 C 46.2082 55.8713 43.522 53.1851 43.522 49.8713 Z" fill="#ffffff"/>
<path d="M 41.522 101.8713 L 44.522 58.8713 L 54.522 58.8713 L 57.522 101.8713 L 62.522 102.8713 C 62.522 102.8713 66.897 102.8713 68.522 105.8713 C 70.147 108.8713 69.522 110.8713 69.522 110.8713 L 29.522 110.8713 C 29.522 110.8713 30.022 106.6213 32.522 104.8713 C 35.022 103.1213 35.522 102.8713 35.522 102.8713 L 41.522 101.8713 Z" fill="#ffffff"/>
<use id="Symbol%207" xlink:href="#Symbol7" transform="matrix(1, 0, 0, 1, 50, 50)"/>
</g>
</svg>
(see http://jsfiddle.net/bBXPA/)
So far I came up with the following:
var attrs = {
"fill": "#ffffff",
"stroke": "#ffffff"
};
var paper = Raphael("container", 100, 111);
var st = paper.set();
st.push(
paper.path("M -1.9046 8.9519 C -1.9046 8.9519 -4.8987 8.475 -6.9209 6.2908 C -8.9745 4.0727 -9.8701 0.5879 -9.8701 0.5879 C -9.8701 0.5879 -20.4872 7.7134 -26.0352 15.9551 C -31.5089 24.0864 -35.0469 30.2674 -35.0112 31.9801 C -34.9758 33.6811 -35.3063 34.8456 -30.9624 33.714 C -26.6625 32.5939 -16.8578 25.5391 -12.946 22.2308 C -9.0346 18.9229 -2.3273 11.229 -1.9046 8.9519 Z"),
paper.path("M -7.4931 -6.5729 C -7.4931 -6.5729 -5.5831 -8.9275 -2.6805 -9.5866 C 0.2674 -10.256 3.7331 -9.2893 3.7331 -9.2893 C 3.7331 -9.2893 2.8708 -22.0467 -1.4928 -30.9723 C -5.7979 -39.7782 -9.3818 -45.9327 -10.8828 -46.7582 C -12.3736 -47.578 -13.2169 -48.4465 -14.4088 -44.1188 C -15.5888 -39.8349 -14.3814 -27.8164 -13.4723 -22.7745 C -12.5632 -17.7332 -9.2538 -8.0776 -7.4931 -6.5729 Z"),
paper.path("M 8.6363 -4.0646 C 8.6363 -4.0646 9.7204 -1.2332 8.84 1.6102 C 7.9458 4.4977 5.3757 7.0158 5.3757 7.0158 C 5.3757 7.0158 16.8551 12.6477 26.7666 13.3315 C 36.5454 14.0062 43.6673 13.9797 45.1327 13.0925 C 46.5881 12.2113 47.7618 11.9153 44.6099 8.7192 C 41.4899 5.5554 30.4779 0.5917 25.6569 -1.1419 C 20.8365 -2.8753 10.8198 -4.837 8.6363 -4.0646 Z")
);
st.attr(attrs);
paper.path("M 43.522 49.8713 C 43.522 46.5576 46.2082 43.8713 49.522 43.8713 C 52.8357 43.8713 55.522 46.5576 55.522 49.8713 C 55.522 53.1851 52.8357 55.8713 49.522 55.8713 C 46.2082 55.8713 43.522 53.1851 43.522 49.8713 Z").attr(attrs);
paper.path("M 41.522 101.8713 L 44.522 58.8713 L 54.522 58.8713 L 57.522 101.8713 L 62.522 102.8713 C 62.522 102.8713 66.897 102.8713 68.522 105.8713 C 70.147 108.8713 69.522 110.8713 69.522 110.8713 L 29.522 110.8713 C 29.522 110.8713 30.022 106.6213 32.522 104.8713 C 35.022 103.1213 35.522 102.8713 35.522 102.8713 L 41.522 101.8713 Z").attr(attrs);
var animate = function () {
st.attr({
transform: "0,0,0"
}).animate({
transform: "r360,0,0"
}, 3000, animate);
};
animate();
(see http://jsfiddle.net/3PrcT/4/)
All looks good, except that the location of the rotating part isn't correct. I guess this is because of the matrix.
Is there a way to apply the matrix and keeping the anchor point correct? Or maybe there is a way to prevent Fireworks from using the matrix transformation?

Have you considered using svg.js with its svg.import.js plugin? You can simply import raw SVG into the library and animate all individual elements afterwards:
/* enable canvas */
var draw = SVG('canvas')
/* import your data */
var store = draw.svg(yourRawSVGdata)
/* animate element with id "Ellipse" */
store.Ellipse.animate().move(100,200)

By looking at the source code of the Fireworks SVG exporter, I noticed it only applies matrix transformations to symbols. So by removing all the symbols, it rendered nice paths I could work with.

Categories