Can you use GSAP in a wix HTML iframe element? - javascript
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>
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)
}
Rounded corners in SVG path semi circle
I have a path which is a semi-circle. How do I make the corners rounded? I do not want to use stroke-linecap: round as I need it to be rounded only on these corners: <svg> <g> <!--background --> <path fill="none" stroke-dasharray="" stroke-width="16" stroke="#607985" d="M30 100 A 40 40 0 0 1 170 100"></path> <!-- strokes --> <path id="meter-back" fill="none" stroke-width="15" stroke="white" d="M30 100 A 40 40 0 0 1 170 100"></path> <!--progress --> <path id="meter-fill" fill="none" stroke-dashoffset="219.942" stroke-dasharray="109.971, 109.971" stroke="rgba(96,121,133,0.7)" stroke-width="15" d="M30 100 A 40 40 0 0 1 170 100" stroke="#607985"></path> </g> </svg>
Here is a fixed solution. dividerPos can be in range from 0 to 1:
const getPath = (outerRadius, innerRadius, cornerRadius, dividerPos) => {
const angle = Math.PI * (1 - dividerPos);
const outerPointX = outerRadius * Math.cos(angle);
const outerPointY = outerRadius * -Math.sin(angle);
const innerPointX = innerRadius * Math.cos(angle);
const innerPointY = innerRadius * -Math.sin(angle);
const left = `M ${-outerRadius},0
A ${outerRadius},${outerRadius} 0 0 1
${outerPointX},${outerPointY}
L ${innerPointX},${innerPointY}
A ${innerRadius},${innerRadius} 0 0 0 ${-innerRadius},0
Q ${-innerRadius},${cornerRadius}
${-innerRadius-cornerRadius},${cornerRadius}
H ${-outerRadius+cornerRadius}
Q ${-outerRadius},${cornerRadius}
${-outerRadius},0
Z`;
const right = `M ${outerPointX},${outerPointY}
A ${outerRadius},${outerRadius} 0 0 1
${outerRadius},0
Q ${outerRadius},${cornerRadius}
${outerRadius-cornerRadius},${cornerRadius}
H ${innerRadius+cornerRadius}
Q ${innerRadius},${cornerRadius}
${innerRadius},0
A ${innerRadius},${innerRadius} 0 0 0
${innerPointX},${innerPointY}
Z`;
return {left, right};
};
const {left, right} = getPath(120, 90, 15, 0.5);
d3.select('.left').attr('d', left);
d3.select('.right').attr('d', right);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='300' height='200'>
<g transform='translate(150,150)'>
<path stroke='grey' fill='grey' class='left'/>
<path stroke='grey' fill='none' class='right'/>
</g>
</svg>
Use getPath routine to compute the desired path
(The 0,0 point in the center of the semi-circle):
const getPath = (outerRadius, innerRadius, cornerRadius) => {
return `M ${-outerRadius},0
A ${outerRadius},${outerRadius} 1 1 1 ${outerRadius},0
Q ${outerRadius},${cornerRadius}
${outerRadius-cornerRadius},${cornerRadius}
H ${innerRadius+cornerRadius}
Q ${innerRadius},${cornerRadius}
${innerRadius},0
A ${innerRadius},${innerRadius} 0 0 0
${-innerRadius},0
Q ${-innerRadius},${cornerRadius}
${-innerRadius-cornerRadius},${cornerRadius}
H ${-outerRadius+cornerRadius}
Q ${-outerRadius},${cornerRadius}
${-outerRadius},0
Z`;
};
d3.select('path').attr('d', getPath(120, 90, 12));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='300' height='200'>
<g transform='translate(150,150)'>
<path stroke='red' fill='none'/>
<circle fill='red' r='5' cx='0' cy='0'/>
</g>
</svg>
How to render n slices inside svg circle?
I am developing a reactJS app.
I need to render an svg circle and when I click it it spawns n equal slices inside.
I created the slices, here is the code
renderSlices = () => {
let slices = [];
const numberOfSlice = 12; //number of slices
for (let i = 0; i < numberOfSlice; i++) {
slices.push({ percent: 1 / numberOfSlice, color: 'gray' });
}
let cumulativePercent = 0;
let arr = [];
arr = slices.map(slice => {
const [startX, startY] = this.getCoordinatesForPercent(cumulativePercent.toString());
cumulativePercent += slice.percent;
const [endX, endY] = this.getCoordinatesForPercent(cumulativePercent.toString());
const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
const pathData = [
`M ${startX} ${startY}`, // Move
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
'L 0 0', // Line
].join(' ');
return <path d={pathData} fill={slice.color} key={pathData} />;
});
return arr;
}
getCoordinatesForPercent(percent: string) {
const x = Math.cos(2 * Math.PI * parseFloat(percent));
const y = Math.sin(2 * Math.PI * parseFloat(percent));
return [x, y];
}
Render method:
<div className="container">
<svg
height="306"
width="306"
viewBox="-1 -1 2 2"
>
{/* <circle cx="150" cy="150" r="148" stroke="black"
strokeWidth="2" fill={"transparent"}/> */}
{this.renderSlices()}
</svg>
</div>
The problem is when I remove the comment from the circle tag and I remove the viewBox, only the circle show up, and when I comment the circle tag and put the viewBox, only the slices show up.
I would like to have the circle with a visible stroke and inside it the slices.
Any help please ?
EDIT:
<svg height="306" width="306" viewBox="0 0 306 306">
<path d="M 1 0 A 1 1 0 0 1 0.8660254037844387 0.49999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 0.5000000000000001 0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.5000000000000001 0.8660254037844386 A 1 1 0 0 1 6.123233995736766e-17 1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 6.123233995736766e-17 1 A 1 1 0 0 1 -0.4999999999999998 0.8660254037844387 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.4999999999999998 0.8660254037844387 A 1 1 0 0 1 -0.8660254037844385 0.5000000000000003 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.8660254037844385 0.5000000000000003 A 1 1 0 0 1 -1 5.66553889764798e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -1 5.66553889764798e-16 A 1 1 0 0 1 -0.866025403784439 -0.4999999999999994 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.866025403784439 -0.4999999999999994 A 1 1 0 0 1 -0.5000000000000004 -0.8660254037844385 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -0.5000000000000004 -0.8660254037844385 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.5000000000000001 -0.8660254037844386 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.5000000000000001 -0.8660254037844386 A 1 1 0 0 1 0.8660254037844388 -0.49999999999999967 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
<path d="M 0.8660254037844388 -0.49999999999999967 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" stroke-width="2" stroke="black" fill="gray"></path>
</svg>
getCoordinatesForPercent(percent: string, radius: number, circle: {x: number, y: number}) {
const x = radius * Math.cos(2 * Math.PI * parseFloat(percent)) + circle.x;
const y = radius * Math.sin(2 * Math.PI * parseFloat(percent)) + circle.y;
return [x, y];
}
Multiply with radius and add the circle coordinates
and change A 1 1 0 ${largeArcFlag} to A ${radius} ${radius} 0 ${largeArcFlag} and 'L 0 0' to 'L ${circle.x} ${circle.y}'
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
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.