Cross SVG paths
I need to cross 2 svg paths and get the path with their intersection.
It should work in the browser or in node.js (either of them, not both).
I need intersection, use is clip-path
not appropriate.
If for some reason the intersection is going to be used transform
, that's ok (I'll remove it myself).
I think there is a library for this, but I only found
- svg-intersections - Returns an array of points, but I need
path
- path-intersection - can't make it work - for some reason it always returns an empty array
- snap.svg - seems to be something useful, but I don't understand how to use this as in Differences and intersection of paths in SVG with Snap.path.intersection
For example, the following intersecting paths
M 24.379464,51.504463 23.434524,23.156249 38.742559,12.572916 c 0,0 29.860118,-9.0714281 17.00893,0.755953 -12.851191,9.82738 13.229166,19.465774 13.229166,19.465774 z
m 32.883928,0.28869028 c 0,0 -15.686011,1.51190452 -8.504463,7.18154712 7.181546,5.6696426 50.270836,30.0491076 26.458332,42.3333336 -23.8125,12.284226 47.058036,14.174107 47.058036,14.174107 z
I want to get something like
M 43.943359 11.123047 C 40.995759 11.900151 38.742188 12.572266 38.742188 12.572266 L 35.236328 14.996094 C 44.091432999999995 21.21816 55.052161 29.822765 57.455078 37.628906 L 66.939453 33.650391 63.632812 30.410156 C 58.77426 27.95814 52.364322 23.85552 52.214844 19.224609 L 43.943359 11.123047 z
Here is an interactive snippet path
from the example (ignore the colors - they are for clarity) - you need to get Intersectionfrom #path1
and #path2
:
svg { width: 10em; width: 100vmin; outline: 1px dotted blue; display: none; }
input { display: none; }
label { width: 10em; float: left; clear: left; cursor: pointer; line-height: 2em; margin: 0 .5em .25em 0; padding: 0 .25em; border: 1px solid; }
:checked + * + * + label { background: antiquewhite; color: blue; }
:checked + * + * + * + * + * + svg { display: inline-block; }
<input type=radio name=svg id=in checked>
<input type=radio name=svg id=out>
<input type=radio name=svg id=cp>
<label for=in>Input</label>
<label for=out>Intersection</label>
<label for=cp>Clip</label>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="22 0 76 64">
<path id="path1"
style="fill:rgba(255,0,0,.5); stroke:red;stroke-width:0.26458332px;"
d="M 24.379464,51.504463 23.434524,23.156249 38.742559,12.572916 c 0,0 29.860118,-9.0714281 17.00893,0.755953 -12.851191,9.82738 13.229166,19.465774 13.229166,19.465774 z"
/>
<path id="path2"
style="fill:rgba(0,255,0,.5);stroke:green;stroke-width:0.26458332px;"
d="m 32.883928,0.28869028 c 0,0 -15.686011,1.51190452 -8.504463,7.18154712 7.181546,5.6696426 50.270836,30.0491076 26.458332,42.3333336 -23.8125,12.284226 47.058036,14.174107 47.058036,14.174107 z"
/>
</svg>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="22 0 76 64">
<path
style="fill:rgba(0,0,255,.5);stroke:blue;stroke-width:0.26458332px;"
d="M 43.943359 11.123047 C 40.995759 11.900151 38.742188 12.572266 38.742188 12.572266 L 35.236328 14.996094 C 44.091432999999995 21.21816 55.052161 29.822765 57.455078 37.628906 L 66.939453 33.650391 63.632812 30.410156 C 58.77426 27.95814 52.364322 23.85552 52.214844 19.224609 L 43.943359 11.123047 z"
/>
</svg>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="22 0 76 64">
<clipPath id="clip2">
<use xlink:href="#path2" />
</clipPath>
<use xlink:href="#path1" clip-path="url(#clip2)" />
</svg>
An example with Snap.svg:
var p1 = "M 24.379464,51.504463 23.434524,23.156249 38.742559,12.572916 c 0,0 29.860118,-9.0714281 17.00893,0.755953 -12.851191,9.82738 13.229166,19.465774 13.229166,19.465774 z"
var p2 = "m 32.883928,0.28869028 c 0,0 -15.686011,1.51190452 -8.504463,7.18154712 7.181546,5.6696426 50.270836,30.0491076 26.458332,42.3333336 -23.8125,12.284226 47.058036,14.174107 47.058036,14.174107 z"
var intersection = Snap.path.intersection(p1, p2)
console.log(intersection)
.as-console-wrapper.as-console-wrapper { max-height: 100vh }
<script src=//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js></script>
+3
source to share
1 answer
Snap.svg seems to have the basic functionality required to do this. Some of them will be a little intoxicated, but that might be the direction. Please use this as pseudocode, not a working one:
// returns something like [ [ "M", 1, 2 ], ["C", 3, 4, 5, 6, 7, 8 ], ... ]
// and has a custom .toString() method
segList1 = Snap.path.toCubic(p1)
segList2 = Snap.path.toCubic(p2)
intersections = Snap.path.intersection(p1, p2)
// handle the subpaths between neighbouring intersections
intersectionPaths = intersections.map((point, id) => {
from = point
to = intersections[id + 1 < intersections.length ? id + 1 : 0]
return pathBetweenIntersections(from, to)
})
// return the two paths between two neighbouring intersection points
function pathBetweenIntersections (from, to) {
// list the segments between the intersection points on first path
// TODO: handle cases when from.segment1 >= to.segment1
subSegList1 = segList1.slice(from.segment1 + 1, to.segment1)
// first segment has the intersection point
startSegments = [ from.bez1.slice(0, 2).unshift('M'), from.bez1.slice(2, 8).unshift('C') ]
startString1 = Snap.path.toCubic(startSegments).toString()
// construct a path element from the segment
startPath1 = Paper.path(startString1)
startPathLength1 = startPath1.getTotalLength()
// get the relevant subpath from intersection point to end
startPathString1 = startPath1.getSubpath(from.t1 * startPathLength1, startPathLength1)
subSegList1 = Snap.path.toCubic(startPathString1).concat(subSegList1)
// and the same for the last segment
endSegments = [ to.bez1.slice(0, 2).unshift('M'), to.bez1.slice(2, 8).unshift('C') ]
endString1 = Snap.path.toCubic(endSegments).toString()
endPath1 = Paper.path(endString1)
endPathLength1 = endPath1.getTotalLength()
endPathString1 = endPath1.getSubpath(0, to.t1 * endPathString1)
subSegList1.push(Snap.path.toCubic(endPathString1)[1])
subSegList2 = // do the same for segList2
return {
p1: Snap.path.toCubic(subSegList1).toString(),
p2: Snap.path.toCubic(subSegList2).toString()
}
}
+1
source to share