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)
}
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>