Mouse handling for overlapping SVG elements not working as expected - javascript

I have several SVG path elements, each of which is inside a parent svg element, like so:
<svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
<path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>
<svg style="position:absolute;left:277.5px;top:109px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="108.5px" width="410.015625px">
<path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>
The svg elements (and thus their child paths) are visually overlapping.
I want to have a hover effect, so I've setup a mouseenter and mouseleave event on each of the paths.
When the mouse is overtop of an area that doesn't overlap, the hovering works as expected, however, when the mouse is over top of an area where the bounding rects of the svg elements overlap, the mouse events are not triggered correctly.
If, however, I place the same two path elements into a single svg as shown below, then the mouse hovering works as expected, even where the bounding rectangles overlap.
<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
<path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>
<path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>
</svg>
JSFiddle
Here is a jsfiddle showing the two cases. The red lines are in separate svg elements and the green lines are in a single svg element. The green lines work as I expect. The red lines do not.
Notes
The paths only look different because the two SVG elements had different "top" attributes in the first example.
Some similar questions mention the need to set pointer-events, but I think I've got those set correctly (to none on the svg element, and to visibleStroke on the paths).
Question
How can I make the mouse handle of the first case, with two svg elements, behave the same way as for the second case with a single svg element?


Adding pointer-events="none" with the correct syntax (you are using a : instead of an =) to the svg on top seems to work for me at least on Firefox. Like so...
<svg class="connector" style="position:absolute;left:277.5px;top:65px" height="152.5px" width="410.015625px">
<path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>
<svg style="position:absolute;left:277.5px;top:109px;" pointer-events="none" height="108.5px" width="410.015625px">
<path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>
<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" height="152.5px" width="410.015625px">
<path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>
<path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>

Related

Animate (draw) SVG Fotography paths and fill, using CSS (JS)

So, I wanted to animate a huge SVG photography, I have done it a year ago but have lost track of how I have done it.
The SVG inside the given code part is not the full image since it has too many characters... but you'll get the sence of the scale and structure by looking at the style definitions.
To start off with, first it should draw all paths and then fill all resulting areas slowly, how could I do this using CSS only? If there is no way, I would be down for some easy JavaScript.
Of course I have the option to have the style for the SVG inline but i thought it would be better this way for now?
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.75 500.05">
<defs>
<style>.cls-1{fill:#fcfcfc;}.cls-2{fill:#e0b5a0;}.cls-3{fill:#b78e76;}.cls-4{fill:#cda593;}.cls-5{fill:#d8ae98;}.cls-6{fill:#b8978a;}.cls-7{fill:#d0b2a2;}.cls-8{fill:#e3ccc1;}.cls-9{fill:#ecc3b2;}.cls-10{fill:#f9c7ba;}.cls-11{fill:#fdccc2;}.cls-12{fill:#f5c7bf;}.cls-13{fill:#ecada4;}.cls-14{fill:#d79a89;}.cls-15{fill:#ebaaa2;}.cls-16{fill:#dc9181;}.cls-17{fill:#efb3ab;}.cls-18{fill:#f7bab8;}.cls-19{fill:#ca836c;}.cls-20{fill:#de9483;}.cls-21{fill:#e4bab4;}.cls-22{fill:#deada6;}.cls-23{fill:#facbc1;}.cls-24{fill:#d68b77;}.cls-25{fill:#e19e8f;}.cls-26{fill:#e3ada2;}.cls-27{fill:#d3947d;}.cls-28{fill:#e3a399;}.cls-29{fill:#d3968a;}.cls-30{fill:#edd5cd;}.cls-31{fill:#fbc9c5;}.cls-32{fill:#f4e4e9;}.cls-33{fill:#e2c1b5;}.cls-34{fill:#c87d66;}.cls-35{fill:#e69e95;}.cls-36{fill:#dcae9e;}.cls-37{fill:#e8baae;}.cls-38{fill:#d78b7a;}.cls-39{fill:#e7bbaf;}.cls-40{fill:#d6a796;}.cls-41{fill:#cab3b3;}.cls-42{fill:#d2b9b9;}.cls-43{fill:#d5b9b9;}.cls-44{fill:#d58c6d;}.cls-45{fill:#decfd6;}.cls-46{fill:#e0bbb1;}.cls-47{fill:#e7c1bc;}.cls-48{fill:#dec6ca;}.cls-49{fill:#fcd4cc;}.cls-50{fill:#fbd4ce;}.cls-51{fill:#cd9b8a;}.cls-52{fill:#ad8369;}.cls-53{fill:#b28a77;}.cls-54{fill:#bd9c8a;}.cls-55{fill:#bc8d7d;}.cls-56{fill:#cda48f;}.cls-57{fill:#d1b5a8;}.cls-58{fill:#bd9c88;}.cls-59{fill:#d7b7ab;}.cls-60{fill:#e4a89b;}.cls-61{fill:#de9e92;}.cls-62{fill:#bd5b33;}.cls-63{fill:#c57760;}.cls-64{fill:#be907b;}.cls-65{fill:#bd816b;}.cls-66{fill:#cd917f;}.cls-67{fill:#b26f51;}.cls-68{fill:#dea396;}.cls-69{fill:#c77c60;}.cls-70{fill:#bb6649;}.cls-71{fill:#b96d4d;}.cls-72{fill:#dd9587;}.cls-73{fill:#c8633d;}.cls-74{fill:#f4cfd4;}.cls-75{fill:#cd856e;}.cls-76{fill:#c9836f;}.cls-77{fill:#d5ac9c;}.cls-78{fill:#d0ad9c;}.cls-79{fill:#ab7f67;}.cls-80{fill:#b8907e;}.cls-81{fill:#e5d0c6;}.cls-82{fill:#c5917f;}.cls-83{fill:#c2775e;}.cls-84{fill:#bc5f44;}</style>
</defs>
<title>hand</title>
<path class="cls-1" d="M150.63,500Q76.2,500,1.78,500c-.89,0-1.08-.2-1.08-1.08Q.73,250,.7,1C.7.13.89-.07,1.78-.07q165.3,0,330.59,0c.88,0,1.08.2,1.08,1.08q0,248.94,0,497.89c0,.88-.19,1.08-1.08,1.08q-44.82,0-89.64,0a7.11,7.11,0,0,1-.6-3.87c0-4.42-.4-8.82-.54-13.23a24.51,24.51,0,0,1-.2-2.56,41.51,41.51,0,0,0-.31-6.78c0-.66-.1-1.32-.1-2,0-4-.42-8-.67-12-.1-1.6-.07-3.19-.23-4.8-.41-3.95-.38-7.94-.73-11.91,0-.15,0-.31,0-.47,0-4.57-.16-9.14-.35-13.71-.27-6.68-.46-13.37-1-20-.2-2.26-.18-4.53-.31-6.8a210.43,210.43,0,0,0-2.54-25.91c-1-5.74-2.62-11.36-4-17a59.1,59.1,0,0,1-1.7-13.25,121,121,0,0,1,.85-15.69c.48-4.07.56-8.19.82-12.29.24-3.71.42-7.42.61-11.13.15-3,.21-6,.53-9a149.7,149.7,0,0,1,2.13-15.93c.65-3,1.42-5.94,2.17-8.9,1.29-4.18,2.26-8.44,3.24-12.7,1.29-5.62,2.32-11.28,3.15-17,.35-2.36.6-4.74,1-7.1,0-.3.19-.59.21-.9a2.27,2.27,0,0,1,.09-.52,2.91,2.91,0,0,0,.15-1.17,3.73,3.73,0,0,1,.09-.67,4.23,4.23,0,0,0,.19-1,3.43,3.43,0,0,1,.06-.34,6,6,0,0,0,.16-1.52c0-.12,0-.24.07-.35a4,4,0,0,0,.11-1.57,4.79,4.79,0,0,1,.09-1.07,3.42,3.42,0,0,0,.17-1.23,3.12,3.12,0,0,1,.08-.52,4.09,4.09,0,0,0,.15-1.52,2.89,2.89,0,0,1,.08-.65,3.2,3.2,0,0,0,.15-.76,1.35,1.35,0,0,1,.1-.74,1.82,1.82,0,0,0,.17-.86,4.25,4.25,0,0,1,.08-.61,3.1,3.1,0,0,0,.15-.91,3.4,3.4,0,0,1,.09-.46,3.22,3.22,0,0,0,.15-.75,3.41,3.41,0,0,1,.1-.46,4.55,4.55,0,0,0,.17-.75c0-.1,0-.21.07-.31a2.18,2.18,0,0,0,.1-.8,29.92,29.92,0,0,1,1.8-5.62,2.2,2.2,0,0,0,.35-.68l.09-.29a4.71,4.71,0,0,0,.22-.84c0-.1,0-.19.07-.29a4.42,4.42,0,0,0,.11-.89,2.64,2.64,0,0,1,.08-.49,8.46,8.46,0,0,0,.17-1.23c0-.12.07-.24.11-.37a75.49,75.49,0,0,0-.11-8.77,2.4,2.4,0,0,1-.09-1.22c0-1.79.09-3.58-.06-5.37a1.56,1.56,0,0,1-.1-.37,2.36,2.36,0,0,1,0-.75,1.71,1.71,0,0,0,0-1.24,2.94,2.94,0,0,1-.05-.59c0-2.37,0-4.74,0-7.11,0-.13,0-.26,0-.39a3.61,3.61,0,0,0,.2-1.3,3.47,3.47,0,0,1,.09-.91,2.9,2.9,0,0,0,.15-1,4,4,0,0,1,.09-.84,4.53,4.53,0,0,0,.19-1c0-.11,0-.21.07-.32a3.87,3.87,0,0,0,.18-1.07,2.84,2.84,0,0,1,.06-.31,4.58,4.58,0,0,0,.19-.75,1.63,1.63,0,0,1,.07-.3,3.08,3.08,0,0,0,.13-.91,2.43,2.43,0,0,1,.08-.47,3.91,3.91,0,0,0,.14-1.27,2.67,2.67,0,0,1,.08-.48,6.23,6.23,0,0,0,.22-1c0-.11.05-.21.08-.32a5.09,5.09,0,0,0,0-1.51,5.64,5.64,0,0,1,.1-1.08,5.43,5.43,0,0,0,.15-1.84,3.72,3.72,0,0,1,.08-.57,8.59,8.59,0,0,0,.15-2.53,3.09,3.09,0,0,1,.08-.61,49.4,49.4,0,0,0,.15-6.32,2.75,2.75,0,0,1,.05-.86c.4-1.84.1-3.7.19-5.55,0-.42,0-.85,0-1.27a2,2,0,0,1,0-.64,8.8,8.8,0,0,0,.14-3.07,7.44,7.44,0,0,1,.1-1.7,47.5,47.5,0,0,0,.16-6.85,9.74,9.74,0,0,1,.05-2.29,5.46,5.46,0,0,0,.21-1.93,2.62,2.62,0,0,1,.07-.74,3.54,3.54,0,0,0,.18-1.25,3.35,3.35,0,0,1,.08-.54,1.89,1.89,0,0,0,.07-1.08c0-1.83.39-3.64.27-5.47a11.15,11.15,0,0,0-.13-3.16,7.93,7.93,0,0,1-.11-1.54,2.74,2.74,0,0,0-.07-1.24,1.86,1.86,0,0,1-.07-.34,5,5,0,0,0-.17-1.16,2.81,2.81,0,0,1-.09-.49,3.17,3.17,0,0,0-.15-1,2.7,2.7,0,0,1-.09-.48,4,4,0,0,0-.13-1.29c0-.1-.05-.21-.07-.31a3.71,3.71,0,0,0-.17-.94,2.46,2.46,0,0,1-.08-.46,3.6,3.6,0,0,0-.14-.92c0-.1-.05-.2-.07-.3a4,4,0,0,0-.18-.91c0-.1-.05-.21-.07-.31a4.44,4.44,0,0,0-.19-1,4.37,4.37,0,0,1-.09-.5,2.85,2.85,0,0,0-.26-1q-1.5-5.68-2.69-11.42c-.9-4.37-2.1-8.66-3.11-13a37,37,0,0,1-.86-5.55c-.2-2.37-.87-4.69-1-7.07-.23-4.69-2.11-9.06-2.66-13.69a67.46,67.46,0,0,0-1.52-7.82,2.57,2.57,0,0,1-.12-.55,3.39,3.39,0,0,0-.15-.89,3.28,3.28,0,0,1-.1-.7,3.52,3.52,0,0,0-.14-1.37,3.28,3.28,0,0,1-.1-.69,3.67,3.67,0,0,1,0-1c.21-.61-.32-.65-.58-.9a20.12,20.12,0,0,1-1.32-3.85c-.06-1.13-.29-2.25-.44-3.37-.32-2.64-.81-5.25-1-7.9-.06-.68-.47-.94-1.12-.87-.16,0-.31,0-.47.06-2.67.42-2.68.44-3.26,3.06-.37,1.63-.44,3.35-1.6,4.72a2,2,0,0,1-.25.25,6.1,6.1,0,0,0-.86.57,14,14,0,0,0-5.71,4.81c-.42.65-.72,1.37-1.08,2.06a25,25,0,0,0-2,8.13A132.77,132.77,0,0,0,219,65.48,35,35,0,0,0,220.83,76c.93,2.66.5,5.4.35,8.11a81.55,81.55,0,0,0,0,9.25q.21,3.25.5,6.51c.21,2.52.54,5,.83,7.54a9.91,9.91,0,0,0,.29,2.43c.43,3.2,1.43,6.31,1.27,9.6a34.31,34.31,0,0,1-1.34,8c-1.12,3.78-2.3,7.54-3.24,11.37a7.66,7.66,0,0,0-.19,1.15,41.93,41.93,0,0,0-.86,8.51,5,5,0,0,1-.31,2.19c-.24.49-.54.52-.87.08a3.68,3.68,0,0,1-.53-1.3Q215,143.15,212.88,137a3,3,0,0,0-.26-.87,32,32,0,0,1-1.88-4.81,1.75,1.75,0,0,0-.24-.74,3,3,0,0,1-.44-.95c-.05-.23-.06-.47-.13-.7a2.68,2.68,0,0,1-.07-.27c-.06-.17-.11-.35-.18-.53l-.1-.27a4.49,4.49,0,0,0-.24-.56l-.15-.29a65.83,65.83,0,0,1-2.44-8.08,46.69,46.69,0,0,0-2.74-7.35,6.58,6.58,0,0,0-.29-.78c-.37-.82-.93-1.52-1.36-2.31a1.62,1.62,0,0,0-.52-.74c-.11-.12-.21-.24-.31-.37-1.69-2.2-2.86-4.76-4.63-6.92-1.62-2-3.26-3.9-4.76-6-.52-.73-1-1.49-1.56-2.2-.32-.5-.67-1-1-1.49a72.22,72.22,0,0,0-4.47-6,2.69,2.69,0,0,1-.2-.27c-1.26-1.69-2.56-3.36-3.92-5-1-1-1.78-2.18-2.86-3.1a9.24,9.24,0,0,1-1-1.15c-2.57-3.59-5.46-6.94-8-10.57a64.32,64.32,0,0,0-4.42-6.35c-1.58-1.78-3.22-3.5-4.73-5.36-2-2.53-3.57-5.41-5.42-8.07a64.15,64.15,0,0,0-5.19-6.65,3.07,3.07,0,0,0-.74-.56c-1.79-1-2.72-2.69-3.66-4.38-1.35-2.47-2.63-5-3.81-7.52-.74-1.6-1.56-1.87-3.24-1.26-.44.16-.87.34-1.3.53a7.86,7.86,0,0,0-3.11,2.24c-.39.48-.62.87.13,1.28a1.88,1.88,0,0,1,.86,1.48c.22,1.75.86,3.57-.76,5.06-.23.22-.09.51,0,.77.18.64.48,1.24.63,1.89s-.36.92-.7,1.3a7.86,7.86,0,0,0-2.21,5.62,22.51,22.51,0,0,0,2.64,10.81c1.26,2.25,2.13,4.7,3.31,7a113.81,113.81,0,0,0,8.83,15.19c1.57,2.16,3.34,4.14,4.93,6.27A15.63,15.63,0,0,1,153,87.27a102,102,0,0,0,9.29,18.13c.61.9,1.25,1.79,1.92,2.65,2,2.93,4.09,5.71,6.05,8.63a5,5,0,0,0,.81.85,7.24,7.24,0,0,1,1.54,2.32c1.15,2,2.77,3.7,3.49,6a11,11,0,0,1,.74,4.09c-.09.59-.1,1.25-1,1-.94-.68-1.06-1.85-1.65-2.73a17.54,17.54,0,0,0-6.59-6.81c-1.36-.77-2.66-1.63-4-2.51-3.7-2.52-7.16-5.36-10.81-7.94-1.09-.92-2.3-1.7-3.34-2.7-2.84-2.14-5.9-3.95-8.85-5.94-1.35-.92-2.58-2-4-2.87-1.21-1.07-2.47-2.1-3.78-3.06a2.37,2.37,0,0,0-.73-.31c-2.91-2-6.39-2.69-9.57-4.07a18.52,18.52,0,0,0-3-1.11c-2.32-.56-3.88-2.26-5.55-3.77-.84-.77-1.74-1.45-2.56-2.23-.49-.47-.2.09-.25.17-.39.56-.78.14-1.08-.06a26.81,26.81,0,0,0-4-2.16,3.25,3.25,0,0,1-1.61-1,4.25,4.25,0,0,0-.56-.29,7.08,7.08,0,0,1-1.22-.79,17.41,17.41,0,0,1-2.27-2.11,14.27,14.27,0,0,1-2.18-2.41,3.65,3.65,0,0,0-5.66,0,.65.65,0,0,0,0,.93,3.88,3.88,0,0,1,.58,3.57,2.5,2.5,0,0,0,.7,2.72,2.94,2.94,0,0,1,.69.94,2,2,0,0,1-.39,1.55,4.8,4.8,0,0,0-.45,3.42,34.74,34.74,0,0,1,.38,5.48,3.14,3.14,0,0,0,.36,1.45,29.88,29.88,0,0,0,6.27,7.09,16.93,16.93,0,0,0,4.42,2.86,1.13,1.13,0,0,1,.27.22,3.47,3.47,0,0,0,1.15,1.29,69.25,69.25,0,0,1,6.79,5,34.7,34.7,0,0,0,6.24,3.71,10.23,10.23,0,0,1,3.78,3.22c3.31,4.55,7.48,8.29,11.52,12.16a105.3,105.3,0,0,0,10.58,9.1,12.61,12.61,0,0,1,4.74,7.65c1.5,6.11,2.89,12.27,5.82,17.92,1.48,2.84,3.17,5.57,4.61,8.43.65,1.11,1.11,2.31,1.65,3.47a10.4,10.4,0,0,1-.55,6.15c-.79,2.19-1.2,4.51-2.33,6.58-.13.24-.23.5-.38.72-.6.9-1.12.92-1.83.1-1.38-1.59-2.57-3.33-3.94-4.93a109.38,109.38,0,0,0-7-8.54c-1.84-2.18-3.44-4.55-5.22-6.78-2.23-3.46-5.67-5.21-9.37-6.5a74.87,74.87,0,0,1-17.13-8.41,13,13,0,0,0-8.79-2,29.14,29.14,0,0,1-10.66-1c-1.63-.41-3.35-.32-4.93-1l-.33-.11a19.86,19.86,0,0,0-2.22-.73,3.61,3.61,0,0,1-.44-.22,2,2,0,0,0-.91-.23,1.77,1.77,0,0,1-.31-.08,11.11,11.11,0,0,1-1.13-.31,4.27,4.27,0,0,0-5.29,1.19c-.25.28-.59.47-.86.78a1.81,1.81,0,0,1,2.63,2c0,.84-.72,1.74.13,2.54a1.51,1.51,0,0,1,.79,1.46c0,.74,0,1.49,0,2.23a7.38,7.38,0,0,0,3.43,6.34c3.46,2.19,6.86,4.49,10.47,6.45a12.81,12.81,0,0,0,4.12,1.65,6.55,6.55,0,0,1,4.68,2.94,13.16,13.16,0,0,0,2.82,2.6c3.43,2.45,7.1,4.55,10.17,7.48a12.51,12.51,0,0,0,2.71,1.61,7.17,7.17,0,0,1,2.61,2.8c2.12,4.35,5.09,8.15,7.82,12.1,1.92,2.76,3.7,5.6,5.56,8.4a9.09,9.09,0,0,0,2.43,2.67,1.45,1.45,0,0,1,.65,1.43c-.36,2.53.75,4.66,1.86,6.78a2.83,2.83,0,0,1,.56,1.75,14.29,14.29,0,0,0,.64,6.14c.58,2.12.47,4.27.79,6.39a37.09,37.09,0,0,0,1.38,6.75,5.46,5.46,0,0,1,0,3.46,28.88,28.88,0,0,0-1,8c-.08,1.86-.68,3.6-.86,5.43-.22,2.33-.72,4.66-.8,7-.13,3.63-1.32,7.06-1.6,10.65a35,35,0,0,1-.66,4.39,142.22,142.22,0,0,0-2.49,15.05c-.39,3.72-.16,7.49-.34,11.23-.11,2.41-.38,4.82-.36,7.25s.14,5,.37,7.49c.22,2.32.22,4.67.51,7a50.92,50.92,0,0,0,3.12,12.25,21.73,21.73,0,0,0,2.16,4.41A6.58,6.58,0,0,0,145,351.1a6.19,6.19,0,0,1,1.81,3.33,27.74,27.74,0,0,0,1.23,3.41c.75,2.43,1.77,4.75,2.73,7.09a13.71,13.71,0,0,1,.53,2.28c.65,3,.75,6,1.11,9,.41,3.48,1.2,6.92,1.35,10.43.11,2.81.43,5.59.64,8.39.17,2.42.22,4.83.18,7.25-.09,5.36-.33,10.7-.82,16a31.72,31.72,0,0,0-.31,4.78c-.16,1.85-.26,3.73-.33,5.6-.1,3-.36,6.06-.62,9.08-.12,1.39-.23,2.8-.32,4.2-.25,4.16-.42,8.33-.59,12.49-.11,2.76-.33,5.52-.29,8.3.08,4.48-.09,9-.2,13.46-.11,4.25,0,8.5,0,12.76,0,3.36,0,6.72,0,10.08A1.18,1.18,0,0,1,150.63,500Z" transform="translate(-0.7 0.07)"/>
<path class="cls-2" d="M241.8,480.22c.53,6.57.68,13.15.93,19.73H205.37a.66.66,0,0,0-.94,0h-3.05c-.31-.28-.55-.6-.25-1s.68-.33,1.05-.12.79.27,1-.27.83-.75,1.47-.47c.27.12.6.34.86,0s0-.6-.15-.87a1,1,0,0,1,.07-1.3,1.79,1.79,0,0,0,.14-2.45c-.24-.41-.53-.8-.13-1.28a.41.41,0,0,0-.07-.61c-.21-.22-.53-.43-.27-.79s.56-.2.87-.14.73.39,1,0a1,1,0,0,0-.32-1.18c-.81-.74-1.45-1.48-.51-2.58.17-.18,0-.44-.13-.65a1.51,1.51,0,0,1,.05-1.47,1.51,1.51,0,0,0-.38-2.09,3.76,3.76,0,0,1-1.46-3.51,1,1,0,0,0-.64-1c-.24-.13-.49-.31-.35-.64s.41-.33.69-.33a8.05,8.05,0,0,1,1.39.22,1.67,1.67,0,0,0,1.55-.3.91.91,0,0,1,1.55.27,1.66,1.66,0,0,0,.87.72c-.91-.91-.9-1.27.07-2.55-.31.06-.39.35-.58.52a1.15,1.15,0,0,1-1.41.18,1.13,1.13,0,0,1-.71-1.23c.21-1.23.14-2.27-1.14-3-.65-.37-.36-1.51.36-1.84.31-.15.69-.09,1.13-.34-2-.88-1.64-2.58-1.61-4.17a.75.75,0,0,1,.31-.6c.54-.37.46-.76.07-1.17a1.18,1.18,0,0,1-.39-.95c.06-.49.26-.71.79-.48.35.16.79.86,1.1.08s.6-1.47-.22-2c-.48-.31-1.15-.4-1.18-1.15a3,3,0,0,1,.59-2.32,2,2,0,0,0,.29-2.4c-.07-.14,0,0-.06-.11-.65-1.7-.12-2.56,1.67-2.42,1,.08,1.07-.13,1-1a2.93,2.93,0,0,0-.86-2.4,1,1,0,0,1,.23-1.66,1.82,1.82,0,0,0,.44-2.69A1.31,1.31,0,0,1,209,443a3.55,3.55,0,0,0-.4-2.92,2.36,2.36,0,0,1-.33-2.11,5.36,5.36,0,0,0-.37-2.87,2.88,2.88,0,0,1,.07-1.59,9.06,9.06,0,0,0-.06-3.44c-.08-.94.12-1.27,1-1.38s1.08-.41.43-1.16-1.73-1.4-1.54-2.72c0-.09-.14-.17-.22-.25-1.29-1.42-1.36-2.19-.34-3.73.25-.37.51-.7,1-.57.77.18.68-.37.56-.76-.33-1.13-.5-2.29-.72-3.44-.05-.22-.21-.46-.16-.68a7.24,7.24,0,0,0-.47-3.87,3.41,3.41,0,0,0-.93-1.79,2.47,2.47,0,0,1-.26-3.18c.14-.2.39-.39.28-.61-.49-1,0-2.21-.73-3.16a1.09,1.09,0,0,1-.14-1c0-.15.16-.36.09-.45-1-1.21.17-2.27.23-3.4,0-.15.14-.33.08-.46-.6-1.43.52-2.46.85-3.67a1.31,1.31,0,0,1,.41-.71c.65-.51,1.16-1,.33-1.81-.26-.25,0-.57.21-.84.93-1.44.92-1.94-.11-3.25a3.62,3.62,0,0,1-1-2.78,2.38,2.38,0,0,0-.86-2.2,1.18,1.18,0,0,1-.56-1.11c.23-.88-.32-1.56-.43-2.32a41.77,41.77,0,0,0-1-5.32c-.07-.25.12-.53.18-.79a3.17,3.17,0,0,0-.25-2.4,1.55,1.55,0,0,1,0-2c.39-.5.1-1.06-.31-1.47a2.4,2.4,0,0,1-.7-1.57c-.14-1.49-.77-2.88-.94-4.35-.24-2.2-.46-4.41-.82-6.6a22.88,22.88,0,0,0-1.78-6.18,7.46,7.46,0,0,1-.79-4.37,7,7,0,0,0-.43-3.8c-.07-.18-.2-.38-.1-.56.74-1.39.57-3.15,1.78-4.35a2.79,2.79,0,0,0,.61-1.74.91.91,0,0,0-.67-1.09c-1.37-.45-2.14-1.65-3.08-2.6-.63-.63-1.18-1.36-1.81-2a3.19,3.19,0,0,0-1.82-.95,4.85,4.85,0,0,1-3.47-3.05c-.43-1,.51-.65,1-.83a3,3,0,0,1-.16-1.74,1.15,1.15,0,0,0-.34-1.08,6.55,6.55,0,0,1-.84-1.67c-.1-.25-.27-.63,0-.77,1-.58.42-1.26.17-1.91a2.1,2.1,0,0,1-.16-1.26,2.82,2.82,0,0,0-.15-1.72,1.1,1.1,0,0,1,0-.92c.75-1.3,0-2.43-.44-3.56a3.86,3.86,0,0,1-.23-2.9,6.23,6.23,0,0,0-.44-4c-.51-1.33-.5-1.38.82-1.77.74-.22.89-.78.52-1.26-1-1.28-.83-2.82-1.15-4.25-.17-.72-.19-1.37.88-1.28.54.05.47-.32.5-.71.13-1.88-.36-3.71-.39-5.58a5.47,5.47,0,0,0-.8-2.19,7.37,7.37,0,0,1-.71-1.86c-.2-1,.22-1.4,1.22-1.25a4.6,4.6,0,0,1,.89.28,2.33,2.33,0,0,0,.95.35,2,2,0,0,0-.36-1.6c-.26-.44-.58-.84-.82-1.29-.79-1.49-.78-1.79.41-3,.44-.44.69-.82.38-1.43-.17-.33-.23-.81.1-1,1.07-.51.54-1.24.26-1.83a18.17,18.17,0,0,0-2.21-4,4.56,4.56,0,0,1-1-1.72c-.1-.42-.24-.87.25-1.15a.84.84,0,0,1,1.06.21,4.37,4.37,0,0,0,.88.59c.28.18.53.38.82.55a21.29,21.29,0,0,1,1.75,1.53c.11.2.2.41,0,.63-.52.32-.73.59-.12,1.13,1.6,1.4,2.36,3.38,3.29,5.21.41.8-.23,1.78-.05,2.74.05.31-.94.68-1.34,1.2-.21.28-.65,0-1-.17s-.47-.41-.73-.19-.18.58-.14.89a8.37,8.37,0,0,0,1.81,3.37,17.85,17.85,0,0,1,1.12,1.51.51.51,0,0,1,0,.65.44.44,0,0,1-.55.06c-.95-.64-2.26,0-3.18-.92-.32-.33-.54.06-.46.45a4.33,4.33,0,0,0,.68,1.48,18,18,0,0,1,1.6,3,1.42,1.42,0,0,1-.33,1.8,2.66,2.66,0,0,0-.81,2.78,1.84,1.84,0,0,1-.42,2.05.72.72,0,0,0-.23.75c.36,1.26.38,2.63,1.33,3.71.74.85.64,1.22-.41,1.81-.62.36-.7.73-.62,1.42.14,1.24.66,2.52-.09,3.75-.06.1-.1.26,0,.34.95,1.2.36,2.71.81,4,.24.66.36,1.32-.31,1.81-.4.28-.2.52,0,.77,1.06,1.35,1,3.19,2.1,4.54a1.2,1.2,0,0,1,.18.91,2.4,2.4,0,0,0,1.26,2.63c1.2.83,2.14,2,3.74,2.27,1.17.2,1.78,1.41,1.76,2.73a2.1,2.1,0,0,0,2.81,2.2c1.66-.63,3,.28,4.4.68,1.62.46,2.2,4,1.11,5.36-.08.09-.15.21-.26.23-1.91.29-3.38,1.57-5.13,2.2a1,1,0,0,1-.8,0c-.31-.22-.14-.53-.07-.86-.59.37,0,.58,0,.84-1.06,1.64-.93,3.56-1.24,5.37a2,2,0,0,0,.18.91,8.13,8.13,0,0,1,.33,2.66c-.07,1.09.84,2,.89,3.11a14.48,14.48,0,0,0,1.14,4.68,9.66,9.66,0,0,1,.52,3.59c.07,1.42.9,2.66.92,4.1,0,.47.41.83.7,1.2a2.72,2.72,0,0,1,.54,1.91,7.28,7.28,0,0,0,.9,3.32c.27.52.58,1,.26,1.65s.21.68.49.93a7,7,0,0,0,.91.53c.76.45.73.75-.07,1.16-.14.07-.29.12-.32.3s0,.18.1.19c1.44.23,1.45.23.82,1.57a1.83,1.83,0,0,0,.25,2.18,1.6,1.6,0,0,1,.38,1.93.53.53,0,0,0,.06.65c.9,1,.78,2.24,1,3.42a14.63,14.63,0,0,0,1.66,4.88c.23.4.63.4,1,.39s.73,0,.85.45a.83.83,0,0,1-.41.91c-.15.12-.32.21-.47.34-.46.39-.35.65.2.79.27.06.54.06.81.14.61.18,1,.5.67,1.2-.24.5-.21,1,.3,1.21,1.48.54,1.75,1.86,2.12,3.18.65-.11.88-.64,1.22-1,.73-.84,1.35-.75,1.72.28.23.63.71,1.27.14,2-.18.23,0,.43.18.61a1.31,1.31,0,0,1,.2,1.34c-.52,1-.41,2.06-.92,3.07a20.51,20.51,0,0,0-.83,3.35c.92-.1,1.05-.57.89-1.22a1.61,1.61,0,0,1,.52-1.7.8.8,0,0,1,1-.18.71.71,0,0,1,.36.91,4.39,4.39,0,0,0-.18,2.16,1.66,1.66,0,0,1-1,1.6,2.9,2.9,0,0,0-1.51,2.23c-.43,1.73-1,1.9-2.31.74a5.44,5.44,0,0,1,.66,2.92c-.14,1,.51,2.13-.62,2.85,0,.16.08.22.17.22,1.8-.17,2.25.32,1.94,2.12a5.05,5.05,0,0,0-.15,1.16c.06,1.39,0,1.52-1.3,2.06a5,5,0,0,1,.57,6,7.91,7.91,0,0,1-1.2,1.44,2.09,2.09,0,0,0-.24,2.77c.24.37.55.19.84.15.45-.06.89-.06,1.1.42a.85.85,0,0,1-.52,1.16c-1.09.55-.75,1.63-.87,2.5-.1.66.22,1.37.18,2.08a.47.47,0,0,0,.51.53c1.16-.14,1.12.67,1.19,1.43a2.43,2.43,0,0,0,.08.86,11.56,11.56,0,0,1,1.55-3.2.89.89,0,0,1,1-.45c.36.14.21.54.25.84.1.81.31,1.62-.36,2.33a.55.55,0,0,0-.08.66c1.09,1.2,1,3.52,3.42,3.45a1.64,1.64,0,0,1,1.53.94,16,16,0,0,1,.77-3.33c0-.11.1-.21.14-.32.32-.83,1.51-.82,1.71-1.43s.33-1.46,1.08-1.93a1.26,1.26,0,0,0,.65-1.6c-.25-.66-.81-.59-1.38-.57-1.11,0-1.47-.42-1.26-1.55a4,4,0,0,0,0-2,.93.93,0,0,1,.51-1.28c.64-.23.77.32.93.77.09.26.18.59.55.43a.85.85,0,0,0,.53-1.16c-.55-1-.51-2.21-1-3.23a3.7,3.7,0,0,1-.24-.54c-.14-.45-.37-1,.23-1.22s.87.18,1.16.58.4,1.42,1.11,1.36.36-1,.65-1.47.59-.68-.19-1c-.57-.24-.4-1,.23-1.41a2.05,2.05,0,0,0,1-2.72c0-.2,0-.41-.3-.43-1.24-.12-1-1.08-.89-1.78A26,26,0,0,0,234,416a2.62,2.62,0,0,0-.13-1.15,3.59,3.59,0,0,1,.65-3.43,2.26,2.26,0,0,1,2.6-.88c.51.15.59.59.7,1a9.21,9.21,0,0,1-.09,3.84,11.23,11.23,0,0,0,.5,5.53,10.59,10.59,0,0,1,.37,4.42,23,23,0,0,0,.67,5.55,5.7,5.7,0,0,1,.06,2,12.49,12.49,0,0,0,.18,4.76,10.36,10.36,0,0,1,0,2.78,22.82,22.82,0,0,0,.14,3.7c.23,3.62.29,7.24.63,10.85a34.71,34.71,0,0,1,.09,4.78c-.06,1.35.38,2.61.45,3.94,0,.65,0,1.31.09,1.95.27,2.63.18,5.26.29,7.88C241.3,475.74,241.58,478,241.8,480.22Z" transform="translate(-0.7 0.07)"/>
<path class="cls-3" d="M173,500H156.5c-1.14-1-1-1.39-.87-2.73.17-2.23,1.13-4.44.18-6.77-.35-.85-.82-2,0-3,.28-.35,0-.92.13-1.38a13.75,13.75,0,0,1,.4-3.12,1.36,1.36,0,0,0,0-1.26,2.81,2.81,0,0,1-.34-2.88c.48-1.34.12-2.52,0-3.78a1.63,1.63,0,0,1,.24-1.13c.68-.87.53-1.91.68-2.89.06-.37,0-.62-.41-.71-.82-.19-.67-.76-.48-1.29a5.61,5.61,0,0,0,.2-3.79,2.5,2.5,0,0,1,.11-1.62,8.37,8.37,0,0,0,.21-4.1c-.09-.73.16-1.47-.44-2.11-.14-.16-.07-.47,0-.68a6,6,0,0,0,.49-3.29,1,1,0,0,1,.27-.74.68.68,0,0,0,.19-.75c-.46-1.11-.14-2.29-.28-3.41a14.87,14.87,0,0,1,.22-3.85c.24-1.71-.24-3.39.12-5.06.09-.43.17-.95.66-1,.75-.08.59-.41.37-.84-.12-.25-.25-.49-.39-.73-.65-1.06-1.13-2.05-.24-3.31a2.86,2.86,0,0,0,.1-2.29,21.06,21.06,0,0,1-.31-2.09c-.07-.47,0-.82.48-1.05.69-.34.65-.84.12-1.29a1,1,0,0,1-.12-1.46,1.76,1.76,0,0,0,.28-1.46c-.28-.92-.2-1.63,1.21-2-1.22-.26-1.19-.8-.81-1.41s.51-1-.25-1.43c-.35-.19-.34-.56-.23-.94,0-.13,1-.26,0-.52-.32-.08-.09-.4.13-.5a1.94,1.94,0,0,0,.81-.66c.08-.11.52-.11.07-.42s-.15-.87.1-1.21.7-.2,1,.05.63.46.88.65c.74-1,.09-2.22.57-3.37-.49-.29-1.1-.07-1.64-.21s-.81-.26-.77-.74.5-.45.84-.43c1.1,0,2.2.12,2.74-1.05-.07,0-.62.48-.65-.09s.76-.55,1.13-.9c-.4-.1-.92.31-1.14-.2s.27-.7.48-1a3.65,3.65,0,0,1,.78-1c.28-.21.45-.38.13-.74-.56-.63-.16-.86.45-.95a1.93,1.93,0,0,0-1,.42.74.74,0,0,1-1-.16c-.2-.33.18-.55.41-.73.43-.33.87-.55.74-1.29-.06-.35.54-.48.93-.54.11.12.1-.22.07-.07s-.08.07-.11,0c-.33-.91-.8-1.6-1.94-1.47a.45.45,0,0,1-.4-.5.48.48,0,0,1,.36-.43c.8-.14,1.56-.29,1.14-1.41,0-.09.21-.21.15-.39-.53-.2-1.33.4-1.59-.28s.57-.83.9-1.24.61-1.24,1.66-1.27a1.58,1.58,0,0,0-.47,0c-.58,0-1.41.57-1.67-.16s.74-.88,1.18-1.26a5.36,5.36,0,0,1,1.9-.64,7.74,7.74,0,0,0-2,.56c-.41.11-.89.47-1.19.11s.24-.72.47-1c.93-1.22.95-1.21,2.47-1.17-.74,0-1.14-.14-1-.77a.64.64,0,0,1,.35-.23c-.15,0-.21.13-.32.19-.29.89-1,1-1.77.92-.41-.06-.82-.2-.78-.7s.43-.93.82-.81c.9.27,1.36-.24,1.93-.7a1.86,1.86,0,0,1,1.49-.52,2,2,0,0,0-1.82.75c-.45.48-.81.32-1.24.15-.63-.26-.77-.64-.21-1.13a4.32,4.32,0,0,0,.63-.5c-.27.11-.67.38-.71-.14a1.44,1.44,0,0,1,1.13-1.72,8.85,8.85,0,0,0-1.14,0c-.27,0-.6.05-.69-.3s.17-.57.46-.73a1,1,0,0,1,.67-.15,1.39,1.39,0,0,0,1.64-1,1.11,1.11,0,0,1,.28-.4c-.51.44-.82,2.05-2.08.9-.68-.61.33-.89.57-1.39-1.28-.6-.09-1.16.21-1.8-.69.13-1.26.4-1.88.46-.27,0-.57.06-.73-.23s0-.46.17-.64c.37-.53.76-1,1.53-.83a1.5,1.5,0,0,0,1.31-.3c-.08-.37-.46-.24-.65-.4-.38-.74-.21-1.31.53-1.26a3.87,3.87,0,0,0,2.57-1.11l.08,0s-.05-.07-.07-.07a10.39,10.39,0,0,0-2.42.85c-.44.24-1.22.6-.81-.56.09-.26-.13-.43-.16-.65a1.35,1.35,0,0,1,1.36-1.38,3.49,3.49,0,0,0,1.25-.08c-.72.12-1.5-.28-2.17.37a.53.53,0,0,1-.83,0c-.21-.26,0-.53.17-.73a14.12,14.12,0,0,0,2.34-2.88c.1-.2.39-.44.56-.38.83.27,1.27-.24,1.81-.7.3-.26.57,0,.63.38s-.22.57-.31.86c.87-.11.84-.1.48-.88-.15-.33-.45-.72-.08-1.07s.51-.06.73.12l.24.2a1.12,1.12,0,0,0,.86-1.68,3.24,3.24,0,0,1-.23-2.46,3,3,0,0,0-.37-2.17c-.17-.27-.22-.48-.09-.66-1.52.42-.79,1.91-1.07,2.89-.4,1.35-1.44,1.65-2.39,2.19-.31.18-.63,0-.7-.39a1.09,1.09,0,0,1,.68-1.34c.39-.14.87-.1.78-.74-.45-.14-.74.28-1.14.26s-.57,0-.62-.39c0-.19.17-.31.27-.45-.15.13-.34.22-.42.4a1.28,1.28,0,0,1-1.46.72.64.64,0,0,1-.61-.47c-.07-.32.11-.49.36-.65a4.44,4.44,0,0,0,2.48-3.32c.06-.55,1.7-1.1,2.15-.78.29.21.19.49.05.74a4.15,4.15,0,0,1-1.08,1.14c.94.13.84-.73,1.1-1.12.39-.61,1.13.32,1.38-.55-.53,0-1.17,0-1.18-.82s.71-2.12,1.38-2.26a7.56,7.56,0,0,0,2-.72,3.33,3.33,0,0,1,1,3.46c-.19.54-.39,1,0,1.55a.8.8,0,0,1,0,.79,1.06,1.06,0,0,0,.29,1.45c.67.59.33,1.68,1.13,2.32.28.23-.29,1-.56,1.45a.78.78,0,0,0,0,1.09c.77,1,.52,2.18-.58,3.55.34.24.93-.23,1.12.33s-.27.86-.54,1.23c1.68.63-.11,1.29.06,2.05l.24,0c.39,0,.95-.35,1.15.19s-.41.84-.82,1.11-.81.47-1,1a.24.24,0,0,0,.21.11c.47,0,1.05-.59,1.37,0s-.35,1-.67,1.37a5.75,5.75,0,0,1-1.52,1.11,9.87,9.87,0,0,1,2.49,0c.51,0,.92.54.42.84-1,.63-1.94,1.56-3.19,1.84.37.17.66-.06,1-.28.88-.54,1.54-.27,1.76.73.07.32.16.51.48.56,1,.14.74.65.38,1.23a4.47,4.47,0,0,1-2.4,2A3.4,3.4,0,0,0,174,389a.56.56,0,0,1,.83.12c.21.33-.08.55-.29.8-.89,1.08-1.87,2.07-2.93,3.33,1,0,1.55.28,1.63,1.13a.39.39,0,0,0,.17.3c1.16.58,1.21,1.31.31,2.19a.3.3,0,0,0,0,.5c.19.15.38.4.27.6-.36.69-.37,1.15.52,1.41.31.09.24.55.07.84a5.36,5.36,0,0,0-.41,1.42c1-.57,1.12.2,1.13.86,0,.84-.3,1.76,1,2,.13,0,.05-.07.08.06a6.49,6.49,0,0,0,.33,2c.36.76-.28,1.24-1,1.58-.88.43-1,.87-.22,1.63a2.41,2.41,0,0,1,.67,2.36,1.71,1.71,0,0,1-2.16,1.55c.35.49.86.3,1.3.34a1.06,1.06,0,0,1,1,.84c.15.58-.27.75-.69.91a5.15,5.15,0,0,0-1,.61c-.89.62-1.08.55-1.28-.52,0-.1,0-.29-.08-.29-.5,0-.72-.26-1-.68a7.58,7.58,0,0,1-.76-1.18,5.59,5.59,0,0,0-.81,1.5c-.13.36-.64,1,.37,1.32.77.27.28,1.29-.08,1.57a1.51,1.51,0,0,0-.53,1.69c.26,1.58-1.06,2.15-2,3-.3.28-.95.18-.74.94s.33,1.09,1.12,1c.6-.07,1.23.11,1.81-.29s.9-.11,1.26.27a.82.82,0,0,1,.14,1,1.22,1.22,0,0,1-1.25.7,6.65,6.65,0,0,1-1.38-.56,2.6,2.6,0,0,1,.82,2.35,11.67,11.67,0,0,0,.18,1.75c0,.86.24,1.46,1.21,1.67a1.87,1.87,0,0,1,1.27,1.15,1.46,1.46,0,0,0,1.85,1,.59.59,0,0,1,.23,0,.86.86,0,0,1,.85.68c.08.43-.18.66-.55.77-.89.25-.7.69-.18,1.13s.66.78,1,1.14a.73.73,0,0,0,.85.23c.3-.13.35-.4.36-.69a3.6,3.6,0,0,0-.27-1.93c-.67-1.22-.47-1.64.84-2a5.78,5.78,0,0,0,.92-.34,1.68,1.68,0,0,1-1.36-.89c-.16-.33-.42-.38-.78-.32-.88.12-1.15-.39-1-1.14a2.06,2.06,0,0,0-.13-1.13,2.54,2.54,0,0,1,1.26-3.44,2,2,0,0,0-.16-3.32c-.57-.42-1.12-.85-1.68-1.28a2.09,2.09,0,0,1-.82-1c-.13-.45-.26-1,.23-1.28s.75.19.94.5c1.11,1.89,3.1,1.69,4.84,2,.51.1.46-.34.32-.63-.37-.79-.3-1.36.66-1.57.12,0,.26-.12.26-.22.05-1,.59-1.88.15-2.84-.6-1.3-.62-1.29.87-1.9-1-1.11-.68-2.48-.83-3.77a.93.93,0,0,1,.34-.94c1.13-.8,1-1.93.8-3-.1-.51-.15-.81.44-1,1.16-.3,1.55-1.34.67-2.14s-.57-2.31-1.28-3.3a.21.21,0,0,1,0-.22c1-.76.91-1.79.9-2.87,0-.32.13-.57-.11-.9-.59-.8-.76-1.89-1.66-2.51-.15-.11-.27-.39-.19-.53.56-1,.21-2.17.7-3.16a1.71,1.71,0,0,1,.63-.83,5.4,5.4,0,0,0,2.15-2.52,2,2,0,0,0-1.46-3.06,3.25,3.25,0,0,0-.82-.07c-1,.08-1.39-.45-1.6-1.33a2.35,2.35,0,0,0-2.85-1.87c-.19,0-.38.08-.58.09a.74.74,0,0,1-.78-.4c-.16-.38.19-.54.45-.71s.51-.2.75-.33c1-.55,1.11-.89.37-1.81s-.18-1.09.69-1.3c-.41-.17-.79-.23-.82-.68s.41-.59.27-1c-.44-.14-.75.16-1.09.33-.61.3-1,0-1.51-.34a.44.44,0,0,1-.12-.62c.23-.48.68-.58,1.15-.69s1.17.38,1.19-.48c0-1-.75-.71-1.34-.68-.31,0-.67.06-.81-.31a.64.64,0,0,1,.35-.8c.92-.35,1-1.22,1.33-1.94a1.83,1.83,0,0,1,2.26.93c.12.24.21.4.51.33a1.48,1.48,0,0,1,1.81.92c.45.93-.47,1.19-.89,1.75.33.45,1.26.22,1.22,1,0,.63-.64.86-1.05,1.39.82-.07,1.31-.06,1.17,1-.08.62.64,1.33.65,2.22,0,.37,1,.48,1.51,0,.68-.69,1.29-1,2-.06.41.51.62.08.8-.32.51-1.14,1-1.23,1.86-.34a2.34,2.34,0,0,1,.79,2.29.73.73,0,0,0,.54-.74,2.69,2.69,0,0,1,1.12-2c.28-.22.59-.54.52-.88-.3-1.54.79-2.91.46-4.51-.12-.6.18-1.4,0-2.13a1.9,1.9,0,0,0-.43-.93c-.67-.8-.55-1.24.49-1.39.75-.11.91-.33.7-1.05a2.39,2.39,0,0,1,.36-2.23c.43-.53.28-.9-.18-1.3-.69-.59-1.09-1.21-.28-2.07.39-.41.12-1-.08-1.44-.62-1.43-1-2.95-1.56-4.4a9,9,0,0,1-.69-4.78,1.18,1.18,0,0,0-.65-1.26,4.77,4.77,0,0,1-1.94-2.71c-.33-1.05-.19-1.19,1.12-1-1.19-.88-.65-2.15-1-3.19-.19-.57.64-.55,1-.83-.14-.57-.7-.59-1-.85-1.17-.85-1.28-1.65-.29-2.69a.67.67,0,0,0,.14-.84,4.73,4.73,0,0,0-.87-1.39c-.65-.59-1.3-1.13-1.05-2.16.05-.21-.16-.44-.34-.59a13,13,0,0,1-2.22-3.29,4,4,0,0,1-.72-2.21,2,2,0,0,0-.39-1.2,3.81,3.81,0,0,1-.63-2,2.17,2.17,0,0,0-.55-1.39,2.67,2.67,0,0,1-.24-3.28,2.34,2.34,0,0,0-.05-2.41c-1-2.09-1.06-4.39-1.37-6.63-.1-.66.49-1.13.54-1.77a13.11,13.11,0,0,0-.92-6.52,4,4,0,0,1-.3-2.17,1,1,0,0,1,1,0c1.16.53,2.18,3.24,1.6,4.35a2,2,0,0,0-.16,1.81,6.3,6.3,0,0,1-.06,4.24,1.43,1.43,0,0,0,.24,1.5,4.14,4.14,0,0,1,1,2.81,3.12,3.12,0,0,0,.53,1.76,3.42,3.42,0,0,1,.1,3.58,1.71,1.71,0,0,0,.09,1.85c1,1.6,1.45,3.48,2.87,4.81a1,1,0,0,1,.12,1.21c-.43.78-.07,1.34.47,1.86a7.77,7.77,0,0,0,1.08.91,2.23,2.23,0,0,1,1.16,2.22,6.33,6.33,0,0,0,1,2.95c.3.63.6,1.27.91,1.91s.37,1.13-.44,1.53,0,.83.22,1a4.46,4.46,0,0,1,2,2.52,20.9,20.9,0,0,0,1.44,5.08,1.49,1.49,0,0,1-.11,1.26,1.43,1.43,0,0,0,0,1.35c.06.14.17.3.14.44a2.7,2.7,0,0,0,.84,2.65.6.6,0,0,1,.07.77,1.87,1.87,0,0,0,.09,2.1,25.43,25.43,0,0,1,.93,3.13c.39,1.13.39,2.34.78,3.46a3.16,3.16,0,0,1-.05,2.08,2.43,2.43,0,0,0-.22.9c0,1.14,0,1.14-1.17,1.12.23.4.66.75.46,1.25-.38,1,0,2.13-.56,3.1-.2.37.05.57.29.79a1,1,0,0,1,.19,1.38,5.4,5.4,0,0,0-.36,4.51c.28.71.26,1.23-.61,1.56s-1.18,1.51-2.08,2c-.23.11,0,.51.16.74a2.35,2.35,0,0,1,.14,1.82c-.14.57-.4,1.06-1.05,1.09s-.82-.49-1-1.26a3.81,3.81,0,0,1-1.18,2.76,1.29,1.29,0,0,0-.19,1.71,5.3,5.3,0,0,1,.69,4.14,2.23,2.23,0,0,0,1,2.47c.48.34,1.12.58.79,1.34s-.91.79-1.58.62a.56.56,0,0,0-.53.08c.4,1,.38,2.24,1.35,3.09a1.09,1.09,0,0,1,.35,1.28c-.19.45-.59.21-.92.21-.61,0-1,.67-.81,1.38a3.3,3.3,0,0,0,1.11,1.76c1.43,1.17,1,2.78.91,4.26,0,.57-.82.71-1.32.34-.2-.16-.16-.55-.54-.55-.19.43.16.5.4.68,1.12.82,1,2-.21,2.49a1.25,1.25,0,0,0-.83,1c-.13.65-.29,1.3-.36,2a1.68,1.68,0,0,1-.74,1.25,3.11,3.11,0,0,0-.42,4.11c1.1,1.33.92,2.28-.63,3.09-.56.29-.88.53-.49,1.23a17,17,0,0,1,1.42,4.58c.24,1.19.07,1.52-1.12,1.81-.71.17-.8.52-.56,1.1s.4,1.11.69,1.62.58,1.12,0,1.6-.93-.33-1.45-.66c.14,1,.32,1.8,1.36,2.07s1,.89.67,1.65c-.65,1.46-1.25,2.95-3,3.5,1,1.36,1,1.55-.45,2.12a2.09,2.09,0,0,0-.81.66,1.92,1.92,0,0,1-1.15.75c-1.05.18-1.62.73-1.6,1.75,0,.82-.67,1.42-.53,2.3.06.39-.57.56-1,.59s-.65-.23-1-.23c-.16.31,0,.49.15.68a1.41,1.41,0,0,1-.33,2.13c-.64.53-1.32,1.15-.73,2.25.31.58-.29,1-1,.78a2.36,2.36,0,0,1-1.62-2.25.4.4,0,0,0-.35-.48c-.49-.14-.91-.45-1.41-.59,0,.36.27.47.43.67.55.72.48,1.17-.37,1.39-1.17.31-1.51,1.67-2.65,2-.14,0-.21.26-.15.41.44,1,.05,2,.07,3a1.92,1.92,0,0,0,.46,1.17c.19.26.34.6.08.85s-.64,0-.91-.22-.39-.49-.74-.73c.66,1.57-.09,3.15.35,4.67.11.38-.23.64-.61.75s-.56.18-.47.54.38.24.65.19c1.29-.27,1.49.88,2,1.58a1.24,1.24,0,0,1-.13,1.78c-1,1.11-1,1.15-2.37,1.39.29.87.17,1.87,1.47,2.18.62.15.58.83-.06,1.12-.94.43-.61.88-.14,1.42,1,1.13,1,1.52-.29,2.41a.68.68,0,0,0-.25,1.07c.08.13.18.25.27.38.24.35.58.71.31,1.17s-.72-.12-1.11.14a4,4,0,0,0,.88,2.34,5.4,5.4,0,0,1,1,2.11c.16.53.14,1-.55,1.18-.47.09-.54.38-.48.77a2.2,2.2,0,0,1-.06,1,1.47,1.47,0,0,0,.81,1.87c1.16.62,1.82,1.38,1.42,2.82a3.28,3.28,0,0,0,.37,1.93c.36,1,.15,1.44-.78,1.87a.81.81,0,0,0,0,1.46C172.89,499.07,173.16,499.34,173,500Z" transform="translate(-0.7 0.07)"/>
</svg>
</svg>

Path CSS animation fill:
<!DOCTYPE html><html><head><style>body{background:#444}svg{width:648px;fill-opacity:0;stroke-dasharray:361;stroke-dashoffset:361;animation:fl 1s 1s linear forwards}#keyframes fl{to{fill-opacity:1}}</style></head><body><svg>
<path d="M1,20H37V32H25V92H13V32H1z" stroke="#fff" fill="#fff">
<animate dur="1" attributeName="stroke-dashoffset" to="0" fill="freeze"/></path>
</svg></body></html>
Path CSS animation stroke:
<!DOCTYPE html><html><head><style>body{background:#444}svg{width:648px;fill:#444;stroke-dasharray:361;stroke-dashoffset:361;animation:strk 1s linear forwards}#keyframes strk{to{stroke-dashoffset:0}}</style></head><body><svg>
<path d="M1,20H37V32H25V92H13V32H1z" stroke="#fff">
<animate dur="1" begin="1" attributeName="fill" to="#fff" fill="freeze"/></path>
</svg></body></html>

Draw arrows between two circles using svg

I am using svg to draw several arcs with arcs on the end between 2 circles with the help of Bezier quadratic path.
Here is the final effect I want to achieve.
http://www.apcjones.com/arrows/
I already had some idea about how to draw several arcs(without arrows) between two circles.
But when I tried to draw several arcs(with arrows on the end) between 2 circles, something weird happened.
I am using here and I set refX to "radius" of the circle to offset the line inside the circle. But I soon realized that simply using refX does not solve the problem, the angle of the marker should also be adjusted(I do not know how).
current effect
Thanks for the help!

In this case you may need to use markers.
<svg width="200" height="100" viewBox="0 0 200 100">
<defs>
<desc>Define the marker</desc>
<marker id="arrow" refX="4" refY="3" markerWidth="6" markerHeight="6" orient="auto" stroke="black">
<path d="M 0 0 L 4 3 L 0 6 Z"></path>
</marker>
</defs>
<desc>Use the markers</desc>
<circle cx="160" cy="50" r="20" />
<circle cx="50" cy="50" r="20" />
<line x1="70" y1="50" x2="140" y2="50" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)"></line>
</svg>
If you need more help please edit your question and add your SVG code

How to stop SVG animateMotion on hover?

I am using a path:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400" xml:space="preserve">
<g class="path path--1">
<path class="path_layer" id="path1" d="M200,240c-80,0 -80,-80 0,-80c80,0 80,80 0,80" stroke="#333333" stroke-width="2" fill="none"/>
</g>
<circle r="5" fill="white" id="planet">
<title>Computer Science</title>
<animateMotion dur="15s" repeatCount="indefinite" keyPoints="0.5;0;1;0.5" keyTimes="0;0.5;0.5;1" calcMode="linear">
<mpath xlink:href="#path1" />
</animateMotion>
</circle>
along which I will be animating the circle as shown above.
Now, I would like to stop the animation on hover, any idea how to do this?
When I hover on the circle, I want to stop the animation and later resume it from wherever I stopped it. The CSS way does not work for this. Should I use JS, if so, how?

You can use the SVG DOM to pause and unpause the animation timeline. The <svg> element's interface has the following useful methods:
pauseAnimations(); // pauses the SMIL animation
unpauseAnimations(); // resumes the SMIL animation
setCurrentTime(); // changes the timeline thereby allowing you to rerun an animation

D3.js Text on path not rendered (no height / width)

I am trying to render circles which have a text inside, that runs along a given path.
The markup d3 produces looks fine, but Chrome is not showing the texts.
Upon inspection it says text elements have 0 width and 0 height.
This is sample markup including only two circles:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 600">
<g>
<g transform="translate(334.14792673070184,58.96385042366173)">
<defs>
<path id="path-1" d="m5,50 a45,45 0 0 0 90,0"></path>
</defs>
<circle class="circle" fill="#ccc" cx="50" cy="50" r="50"></circle>
<text fill="#333" font-size="15px">
<textpath xlink:href="#path-1" start-offset="0%">123456</textpath>
</text>
<use xlink:href="#path-1" fill="#666" opacity="0.1"></use>
</g>
</g>
<g transform="translate(374.66047394649974,371.7948729806046)">
<defs>
<path id="path-2" d="m5,50 a45,45 0 0 0 90,0"></path>
</defs>
<circle class="circle" fill="#ccc" cx="50" cy="50" r="50"></circle>
<text fill="#333" font-size="15px">
<textpath xlink:href="#path-2" start-offset="0%">123456</textpath>
</text>
<use xlink:href="#path-2" fill="#666" opacity="0.1"></use>
</g>
</svg>
When I inspect the markup in Chrome console and click "Edit as HTML" on the SVG element, make a random change, save & exit - the SVG suddenly renders correctly.
The exact same thing happens in Firefox and Opera.
Copy pasting the generated markup into a jsfiddle renders everything as expected.
I have tried pulling the < defs > tags out of each individual group into a single global < defs > but it did not solve the problem.
I have also looked at user-agent-stylesheet and other CSS rules that might interfere with rendering.
Is this a problem with how the SVG tag is included and/or the container element's width/height properties? I have been trying different things to fix this for a couple of hours now...
Here is the full SVG markup http://pastebin.com/J2Lz8p23
Here are the relevant parts in my code http://pastebin.com/Bym8kJVN

Is it possible to extend the height and width of a child element beyond its container?

I have a zoomable svg that's provided by 3rd a party API. It's basically a drawing that's mapped to a grid. The problem is the API doesn't include the grid in the provided svg file so I have to hack it to include one. Basically, the markup is like this:
<svg>
<g>
<line>....
<rect>....
etc...
</g>
</svg>
The zoom functionality is done and now I'd like to add the grid. I'm thinking I should add it like so:
<svg>
<g>
<rect x="0" y="0" width="100%" height="100%" fill="black" />
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 1 1 L 0 0 0 0" fill="none" stroke="green" stroke-width="1" />
</pattern>
</defs>
<rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
<line>....
<rect>....
etc...
</g>
</svg>
The grid is drawn but it's bound within the <g> tag. Is it possible to extend the grid beyond it but still zoomable? Or are there other better ways to achieve this?

Categories