SVG paths and images - javascript

I'm trying to add images to SVG paths as the title is saying.
I've made the following fiddle,
JSFiddle
I'd like to put images within the paths, like so,
(Green dots representing images)
so image
How would this be done? I tried adding images to the path, but they just didn't show up, obviously.
Code:
<svg width="175" height="175">
<g transform="translate(87.5,87.5)">
<path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
<path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
<path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
<path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
<path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
</g>
</svg>


Following the picture, you need to add 5 circles.
Each circle is rotated relative to the other by the same angle - 360/5 = 72
Create the first circle:
<defs>
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" />
</defs>
Use the command <use> to clone the circle and rotate it transform
=" rotate (deg x y) " to the desired angle relative to the first circle.
<svg width="175" height="175" >
<defs>
<circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" />
</defs>
<g transform="translate(87.5,87.5)">
<path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
<path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
<path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
<path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
<path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
<path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
</g>
<use xlink:href="#greenCircle" transform="rotate(-10 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(62 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(134 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(206 87.5 87.5)" />
<use xlink:href="#greenCircle" transform="rotate(278 87.5 87.5)" />
</svg>


Here's a hint, add this to your fiddle:
<circle cx="0" cy="0" r="10" fill="#12345"></circle>

Related

Add svg on exists path

I had an exsits path that represent line with arrow:
<path {...lineProps} id={id} />
it looks like:
is there a chance to add the next svg in the middle of the current link:
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</svg>
it looks like:
eventually it should look like:

As #AKX commented you need to find the point in the middle of the path. You can do it using the getTotalLength and getPointAtLength methods.
As for the tag you can put it inside a symbol and use the symbol with <use>. The use element can take an x and y attributes, the x and y of the point in the middle of the path. In order to center the use element around the point you need also to translate the use element backward half width and height
//the path length
let l = thePath.getTotalLength();
//the point in the middle of the path
let p = thePath.getPointAtLength(l/2);
//set the x andy attributes in the middle of the path
theUse.setAttribute("x", p.x);
theUse.setAttribute("y", p.y);
<svg viewBox="0 0 300 200" width="300">
<symbol viewBox="0 0 32 18" fill="none" id="s">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</symbol>
<marker id="mk" viewBox="0 0 4 4" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto-start-reverse">
<polygon points="0,0 4,2 0,4" fill="black" />
</marker>
<path id="thePath" d="M10,10 L270,160" stroke="black" stroke-width="4" stroke-dasharray="5" marker-end="url(#mk)" />
<use id="theUse" xlink:href="#s" width="32" height="18" transform="translate(-16,-9)" />
<svg>

svg path fill animation

I'm trying to achieve a svg path fill animation like the gif below, tried clipPath but no luck, any help, idea how to achieve that kind of animation (gif image below)? tried gsap or any svg animation library but none of them cater my needs.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 263.42 187.39">
<defs>
<clipPath id="clip1">
<path class="cls-1" fill="#c2a01e" d="M1889.36,77.11v3.47L1853,111.81q-10.32,2.86-21.35,7.09l-5.2,2c-8.68-2.49-17.65-5-26.73-7.37l90.6-109.08L1891.48,3V0H1737.59V4.49h0V51.65h2.23V48.17l50.94-43.68h44l-82.46,99.29-4,4.76c25.65,2.89,53.48,10.52,78.8,17.75l5.2-2c22.16-8.58,42.53-12.81,59.26-13.69V77.11Z" transform="translate(-1677.9)"/>
</clipPath>
<clipPath id="clip2">
<path class="cls-1" fill="#c2a01e" d="M1932.74,126.17c-13.82-10.71-52.11-11.68-98.2,6.14l-5.19,2c-53.78-15.35-118.75-32.47-150.47-2.43a3.15,3.15,0,0,0-1,2.51v0a2.32,2.32,0,0,0,3.67,1.69c24.48-17.77,57.75-16.76,132.38,4.48l-1.75.75c-8.06,3.49-21,9.57-34.68,15.79-20.34-9.54-48.19-17.44-66.13-6.65-26.21,15.75-19.06,51.2,38.47,30.66,8.47-3,48.84-21.17,83-35,2.93.89,5.92,1.79,9,2.73,16.51,5.06,38.3,8.93,57.55,10.6C1945.4,163.47,1948.48,138.37,1932.74,126.17ZM1712,157.37c15.48-11.94,39.91-5.59,58.83,2.82-6.94,3.12-13.89,6.17-20.3,8.84C1699.64,190.21,1697.33,168.67,1712,157.37Zm149.51-14c-4.11-1.09-8.38-2.27-12.78-3.51,9.34-3.58,17.56-6.5,23.64-8.22,29.63-8.41,58.5-3.24,61,6.19C1936.54,149.74,1912.3,156.79,1861.48,143.37Z" transform="translate(-1677.9)"/>
</clipPath>
</defs>
<path class="cls-1" fill="#FFF" clip-path="url(#clip1)" transform="translate(-1677.9)"/>
<path class="cls-1" fill="#FFF" clip-path="url(#clip2)" transform="translate(-1677.9)"/>
</svg>

The general idea is this: you draw the path you clip it as you need and next you animate the stroke-dashoffset of the clipped path. You make sure that the animation for the next path begins after the previous one ends: begin="a.end + .5s".
However in this case you will need to rewrite the paths. For example in the case of the lace I would use 2 paths and 2 different clip-paths or even 3. Otherwise you get an unaesthetic bleeding effect where the path overlaps.
<svg viewBox="0 0 500 500">
<defs>
<clipPath id="theZ">
<path d="M401.374,215.788v6.586l-69.015,59.278c-13.06,3.619-26.567,8.105-40.525,13.457l-9.869,3.797
c-16.477-4.727-33.502-9.49-50.737-13.989L403.196,77.872l2.202-2.752v-5.694h-292.1v8.522l0,0v89.515h4.232v-6.605l96.69-82.91
h83.517L141.219,266.41l-7.592,9.035c48.687,5.486,101.511,19.969,149.57,33.691l9.871-3.796
c42.062-16.286,80.727-24.315,112.481-25.985v-63.567H401.374z"/>
</clipPath>
<clipPath id="theLace">
<path d="M483.714,308.909c-26.231-20.329-98.91-22.17-186.394,11.654l-9.852,3.796
c-102.081-29.135-225.4-61.631-285.608-4.611c-1.316,1.222-2.013,2.971-1.898,4.764l0,0c0.201,2.424,2.328,4.227,4.751,4.025
c0.799-0.065,1.565-0.348,2.215-0.817c46.466-33.729,109.616-31.812,251.271,8.503l-3.321,1.424
c-15.298,6.625-39.86,18.165-65.826,29.971c-38.607-18.107-91.47-33.103-125.522-12.621c-49.75,29.895-36.178,97.183,73.02,58.195
c16.077-5.694,92.704-40.184,157.544-66.434c5.561,1.689,11.236,3.397,17.082,5.182c31.338,9.604,72.698,16.95,109.236,20.12C507.744,379.709,513.591,332.066,483.714,308.909z M64.726,368.131c29.383-22.664,75.753-10.611,111.666,5.352
c-13.173,5.923-26.365,11.712-38.531,16.779C41.265,430.464,36.88,389.579,64.726,368.131z M348.512,341.557
c-7.801-2.068-15.906-4.309-24.258-6.662c17.729-6.795,33.331-12.338,44.871-15.603c56.241-15.963,111.04-6.149,115.785,11.749
c6.017,22.607-39.993,35.988-136.455,10.516H348.512z"/>
</clipPath>
</defs>
<path fill="none" stroke="#C2A01E" clip-path="url(#theLace)" stroke-width="25" stroke-dasharray="1206" stroke-dashoffset="1206" d="M-0.038,324.512c0,0,49.523-27.071,69.538-27.012 c23.35,0.069,74.84,1.785,121.646,11.637C242.583,319.965,288.5,338.5,288.5,338.5s134.99,34.916,169,27s36.999-16.612,35-33.425
s-44.115-67.954-226,12.425s-172,69-172,69s-52.867,8.077-52-16s7.277-37.219,43.205-46.984c38.84-10.557,110.17,30.986,110.17,30.986" >
<animate id="a"
attributeName="stroke-dashoffset"
attributeType="XML"
from="1206" to="0"
dur="1s"
fill="freeze"
repeatCount="1"/>
</path>
<path fill="none" stroke="#C2A01E" d="M259.424,309.137V64.778" clip-path="url(#theZ)" stroke-width="300" stroke-dasharray="244.36" stroke-dashoffset="244.36">
<animate
attributeName="stroke-dashoffset"
attributeType="XML"
begin="a.end + .5s"
from="244.36" to="0"
dur="1s"
fill="freeze"
repeatCount="1"
/>
</path>
</svg>

Svg circular slider color changing

I have following svg and i want to create a circular slider,
and the problem is i can't found anything related to changing
stroke color of part of image.
<svg width="221px" height="221px" viewBox="0 0 221 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<pattern id="pattern" width="100%" height="100%">
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<use xlink:href="#path-1"></use>
</mask>
</pattern>
<defs>
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="221" height="221" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Final" stroke="none" stroke-width="1" fill="url(#psattern)" fill-rule="evenodd" opacity="0.69921875" stroke-dasharray="1,4">
<g id="voor" transform="translate(-77.000000, -230.000000)" stroke="#F5A623" stroke-width="48">
<g id="fi-strokes" stroke-width="48">
<g id="Gup" transform="translate(0.000000, -44.000000)">
<g id="Gup-5" transform="translate(20.000000, 111.000000)">
<g id="rp-4">
<g id="und" transform="translate(57.000000, 163.000000)">
<g id="reen">
<g id="Dl">
<g id="faded-ts">
<use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
How to change part of image on mouse/touch events to another color?
I tried:
clip-path - i couldn't create smooth color changing.
linear-gradient - same problem
Any Tips?

snapsvg - Move path to cursor pointer

I have a complex SVG with multiple paths. I'm trying to the change the path data (d) of the paths to match the position of the cursor so when the user mouseover the svg, they move toward the pointer.
What seem like a simple animation feels more like nightmare considering I'm not sure about my approach and choice of tools.
Here is my SVG:
<svg version="1.1" id="graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 222 246.6" style="enable-background:new 0 0 222 246.6;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);fill:#52B3F5;}
.st1{clip-path:url(#SVGID_2_);fill:#8FDAFF;}
.st2{clip-path:url(#SVGID_2_);fill:#0468FF;}
.st3{clip-path:url(#SVGID_2_);fill:none;stroke:#0468FF;stroke-miterlimit:10;}
.st4{clip-path:url(#SVGID_2_);fill:none;stroke:#8FDAFF;stroke-miterlimit:10;}
.st5{clip-path:url(#SVGID_2_);fill:none;stroke:#52B3F5;stroke-miterlimit:10;}
</style>
<g>
<defs>
<rect id="SVGID_1_" width="222" height="246.6"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path class="st0" d="M222,233.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8
C219.4,228,222,230.6,222,233.8"/>
<path class="st0" d="M105.2,150c0,2.1-1.7,3.7-3.7,3.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7
C103.5,146.2,105.2,147.9,105.2,150"/>
<path class="st0" d="M34.4,21.1c0,2.5-2,4.5-4.5,4.5s-4.4-2-4.4-4.5c0-2.5,2-4.4,4.4-4.4S34.4,18.6,34.4,21.1"/>
<path class="st1" d="M110.5,207.1c0,3.3-2.7,5.9-5.9,5.9c-3.3,0-5.9-2.7-5.9-5.9c0-3.3,2.7-5.9,5.9-5.9
C107.8,201.2,110.5,203.9,110.5,207.1"/>
<path class="st2" d="M128.4,207.1c0,3.9-3.2,7.1-7.1,7.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1
C125.3,200.1,128.4,203.2,128.4,207.1"/>
<path class="st2" d="M22.7,240.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8
C20.1,235,22.7,237.6,22.7,240.8"/>
<path class="st0" d="M9.2,232.7c0,2.6-2.1,4.6-4.6,4.6S0,235.3,0,232.7s2.1-4.6,4.6-4.6S9.2,230.1,9.2,232.7"/>
<polygon class="st3" points="148.1,105.2 106.2,207.1 120.5,207.1 155.4,122.2 "/>
<path class="st2" d="M202.5,23.5c0,3.1-2.5,5.7-5.7,5.7s-5.7-2.5-5.7-5.7c0-3.1,2.5-5.7,5.7-5.7S202.5,20.4,202.5,23.5"/>
<path class="st2" d="M188.7,17.5c0,1.9-1.5,3.4-3.4,3.4c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4
C187.2,14.1,188.7,15.6,188.7,17.5"/>
<polygon class="st3" points="184.4,17.1 106.2,207.1 120.5,207.1 196,23.4 194.2,22.4 "/>
<polygon class="st4" points="39.4,17 29.5,22.4 27.7,23.3 103.3,207.1 106.3,207.1 117.6,207.1 "/>
<polygon class="st3" points="118.7,5.6 105.9,5.6 103.2,5.6 5.8,234.2 6.4,234.6 16,241.4 "/>
<polygon class="st5" points="17.3,242.7 121.4,149.5 111.7,140.8 6.3,234.6 9.2,236.7 "/>
<polygon class="st5" points="217.3,234.1 111.7,140.8 101.9,149.5 205.8,242.5 206.4,242.1 "/>
<polygon class="st4" points="217.3,234.1 120.3,5.6 105.8,5.6 206.4,242.1 "/>
<polygon class="st5" points="181.8,15.6 102,87.3 111.7,96.1 194.2,22.4 "/>
<polygon class="st5" points="41.7,15.7 29.5,22.4 111.7,96.1 121.6,87.3 "/>
<path class="st0" d="M46.9,17.7c0,3-2.4,5.3-5.3,5.3c-3,0-5.3-2.4-5.3-5.3c0-3,2.4-5.3,5.3-5.3C44.5,12.3,46.9,14.7,46.9,17.7"/>
<path class="st1" d="M44.2,20.7c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S44.2,19,44.2,20.7"/>
<path class="st1" d="M31.4,22.3c0,1.5-1.2,2.7-2.7,2.7S26,23.8,26,22.3c0-1.5,1.2-2.7,2.7-2.7S31.4,20.8,31.4,22.3"/>
<path class="st2" d="M105,5.6c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8C103.3,1.9,105,3.5,105,5.6"/>
<path class="st2" d="M124.3,5.6c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6C121.8,0,124.3,2.5,124.3,5.6"
/>
<path class="st1" d="M123.6,5.6c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1
C122.2,2.5,123.6,3.9,123.6,5.6"/>
<path class="st0" d="M186.2,15.7c0,2.5-2.1,4.6-4.6,4.6s-4.6-2.1-4.6-4.6c0-2.5,2.1-4.6,4.6-4.6S186.2,13.2,186.2,15.7"/>
<path class="st0" d="M197.8,22.4c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8
C196.1,18.7,197.8,20.3,197.8,22.4"/>
<path class="st0" d="M199.4,22.4c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3
C197,17.1,199.4,19.5,199.4,22.4"/>
<path class="st1" d="M111.4,5.6c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6C108.9,0,111.4,2.5,111.4,5.6"
/>
<path class="st0" d="M142.4,52.6c0,1.1-0.9,2.1-2.1,2.1c-1.1,0-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1
C141.5,50.5,142.4,51.5,142.4,52.6"/>
<path class="st1" d="M132.9,61.7c0,1.6-1.3,3-3,3c-1.6,0-3-1.3-3-3c0-1.6,1.3-3,3-3C131.5,58.8,132.9,60.1,132.9,61.7"/>
<path class="st0" d="M149.1,65.5c0,2-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7c0-2,1.7-3.7,3.7-3.7S149.1,63.4,149.1,65.5"/>
<path class="st1" d="M140.2,75.1c0,2.9-2.3,5.2-5.2,5.2c-2.9,0-5.2-2.3-5.2-5.2c0-2.9,2.3-5.2,5.2-5.2
C137.9,69.9,140.2,72.2,140.2,75.1"/>
<path class="st1" d="M221,233.8c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8C219.4,230.1,221,231.7,221,233.8"/>
<path class="st1" d="M209.5,240.7c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8
C207.8,237,209.5,238.7,209.5,240.7"/>
<path class="st2" d="M85,52.6c0,1.1-0.9,1.9-1.9,1.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9C84.2,50.7,85,51.5,85,52.6"/>
<path class="st2" d="M96.1,62c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C94.9,59.3,96.1,60.5,96.1,62"/>
<path class="st2" d="M9.2,233.7c0,1.6-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9S9.2,232.1,9.2,233.7"/>
<path class="st0" d="M82.7,65.7c0,2.6-2.1,4.7-4.7,4.7c-2.6,0-4.7-2.1-4.7-4.7c0-2.6,2.1-4.7,4.7-4.7C80.5,61,82.7,63.1,82.7,65.7"
/>
<path class="st0" d="M90.1,75.1c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9C89.3,73.2,90.1,74.1,90.1,75.1"/>
<path class="st2" d="M150.4,105.2c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7
C149.2,102.6,150.4,103.8,150.4,105.2"/>
<path class="st2" d="M159.7,123c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4C157.9,119,159.7,120.7,159.7,123"/>
<path class="st1" d="M159.2,88c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4C157.4,83.9,159.2,85.7,159.2,88"/>
<path class="st1" d="M165.2,105.7c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7
C164,103.1,165.2,104.2,165.2,105.7"/>
<path class="st2" d="M79.9,104.1c0,2.4-1.9,4.3-4.3,4.3c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3
C78,99.7,79.9,101.7,79.9,104.1"/>
<path class="st2" d="M109.8,207.1c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
C108.2,203.5,109.8,205.2,109.8,207.1"/>
<path class="st2" d="M71,86.7c0,1.6-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9S71,85.1,71,86.7"/>
<path class="st0" d="M22.7,240.8c0,2-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7S22.7,238.7,22.7,240.8"/>
<path class="st1" d="M123.7,207.1c0,2.8-2.2,5-5,5c-2.8,0-5-2.2-5-5c0-2.8,2.2-5,5-5C121.4,202.1,123.7,204.4,123.7,207.1"/>
<path class="st0" d="M114.3,140.8c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S114.3,139.1,114.3,140.8"/>
<path class="st0" d="M104.6,168c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1
C103.2,164.9,104.6,166.3,104.6,168"/>
<path class="st1" d="M94.7,176.6c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4s1.8-4,4-4C92.9,172.7,94.7,174.4,94.7,176.6"/>
<path class="st2" d="M121,168c0,0.9,0.7,1.6,1.6,1.6c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6C121.7,166.4,121,167.1,121,168"
/>
<path class="st0" d="M136,164.1c0,1.3,1,2.3,2.3,2.3c1.3,0,2.3-1,2.3-2.3c0-1.3-1-2.3-2.3-2.3C137,161.8,136,162.8,136,164.1"/>
<path class="st2" d="M127.5,176.6c0,3.3,2.6,5.9,5.9,5.9c3.3,0,5.9-2.6,5.9-5.9c0-3.3-2.6-5.9-5.9-5.9
C130.1,170.7,127.5,173.4,127.5,176.6"/>
<path class="st0" d="M125.6,150.1c0,2.7-2.2,5-5,5c-2.7,0-5-2.2-5-5c0-2.7,2.2-5,5-5C123.4,145.2,125.6,147.4,125.6,150.1"/>
<path class="st1" d="M103.9,154.9c0,3.8-3.1,6.9-6.9,6.9c-3.8,0-6.9-3.1-6.9-6.9c0-3.8,3.1-6.9,6.9-6.9
C100.8,148,103.9,151.1,103.9,154.9"/>
<path class="st0" d="M207.3,239.1c0,1.8-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3s1.5-3.3,3.3-3.3S207.3,237.3,207.3,239.1"/>
</g>
</svg>
And my full, completely failed attempt can be found here
I guess the real question would be how to find the "d" endpoint of the mouse cursor so I can assign it to the paths.

cx and cy are for circles and ellipses. And you don't need to modify the d attribute for paths either.
All you need to do to move any element is apply a translate transform. Ie:
<path ... transform="translate(20, 20)">
In Snap you can use the Element.transform() function to apply a transform.
Here's a demo where I move each path towards the pointer a little bit every time you move the pointer.
function moveFunc( ev, x, y ) {
//console.log(ev);
paths.forEach(function(el) {
// Convert screen mouse coords to the equivalent point in SVG coords
var pt = cursorPoint(x, y);
// Get the "center" of each path by way of its bounding box
var b = el.getBBox();
var cx = b.x + b.width/2;
var cy = b.y + b.height/2;
// Get the direction vector from the path center to the pointer location
var dx = pt.x - cx;
var dy = pt.y - cy;
// Get the current transform (if any) on the path
var currentTransform = el.transform().localMatrix;
// Add the tranlation that moves the paths a little toward the pointer
currentTransform = currentTransform.translate(dx/20, dy/20);
el.transform(currentTransform);
});
}
// Convert a screen space coordinate to an SVG coordinate
function cursorPoint(x, y) {
var svg = s.node;
var pt = svg.createSVGPoint();
pt.x = x; pt.y = y;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
Hopefully this is enough to get you started. To move the <polygon> points, you'll need to get the array of points and then update each point in the array by adding dx,dy.
You can get the points of a polygon using el.node.points.
Good luck!

SVG masks with transformation matrices

Well, basically I have a SVG file which coordinates are calculated taking into account the screen resolution. Nonetheless, I have now a process that sends the SVG to another computer and adjusts each object to the resolution of the receiving computer. For that, I use the transformation matrix as you can see in object "OjeB0J0NzcPolyline1507". Everything went well, until now that I have to deal with masks.
Basically, the mask crops the SVG like if the mask was applied before the transformation and since the mask has a specific size, everything that is outside the mask is cropped. Nonetheless, I have already tried to make the svgjsRubberRect bigger and anything seems to work.
Is there any way to adjust the mask so the whole object is shown with exception to what is covered by the element"OjeB0J0NzcPath1519"
EDIT:
Original SVG:
<g id="canvas">
<polyline fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" > </use>
</mask>
</defs>
</svg>
Scaled SVG:
<svg id="zxjzF2hIO8Svg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">
<polyline transform="matrix(0.312592 0 0 0.462912 0 0)" fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable" transform="matrix(0.312592 0 0 0.462912 0 0)"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" transform="matrix(3.19906 0 0 2.16024 0 0)"> </use>
</mask>
</defs>
</svg>

Categories