search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.01k stars 1.07k forks source link

Intersection Feature Request #1200

Closed darkworks closed 11 months ago

darkworks commented 3 years ago

Feature request

Summary : I think it will be good if we have Intersection feature like if i have star shape and circle shape and if they intersect then we could get a new shape

image

Example : in below example code we have two elements path98 and path218.

image

the path218 is in intersection with path98 so it will be good if have intersection feature so that we can get pure 8 by erasing the white intersection points. image

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="771pt" height="310pt" viewBox="0 0 771 310" version="1.1">
<g id="surface1">

    <path
       id="path94"
       d="m 68.378906,235.66406 -0.265625,0.0117 -0.464843,0.10547 -0.214844,0.0625 -0.203125,0.0664 -0.183594,0.0859 -0.167969,0.082 -0.132812,0.082 -0.128906,0.0859 -0.117188,0.0625 -0.08594,0.0664 -0.06641,0.0508 -0.05078,0.0508 -0.03125,0.0156 -0.01563,0.0195 -0.148437,0.16406 -0.152344,0.16797 -0.117188,0.18359 -0.09766,0.1836 -0.167969,0.34765 -0.09766,0.33203 -0.07031,0.28516 -0.01563,0.13281 -0.01953,0.0977 -0.01172,0.10156 v 0.11719 l 0.01172,0.29687 0.05078,0.28516 0.06641,0.25 0.08594,0.21484 0.06641,0.16797 0.06641,0.13282 0.05078,0.0664 0.01563,0.0352 0.183594,0.19922 0.199219,0.18359 0.214843,0.16797 0.214844,0.13281 0.203125,0.0977 0.148438,0.0664 0.06641,0.0312 0.05078,0.0195 0.01563,0.0195 h 0.01953 l -0.386718,0.11328 -0.3125,0.14844 -0.28125,0.1875 -0.234375,0.16406 -0.183594,0.16406 -0.136719,0.13672 -0.06641,0.082 -0.03125,0.0156 v 0.0195 l -0.183594,0.30078 -0.148437,0.3125 -0.101563,0.30078 -0.06641,0.30078 -0.03516,0.26563 -0.01563,0.11328 v 0.10156 l -0.01563,0.0664 v 0.11718 l 0.01563,0.26953 0.03516,0.26172 0.05078,0.25391 0.06641,0.24609 0.164063,0.41797 0.08594,0.19922 0.09766,0.16797 0.101562,0.16406 0.08203,0.13672 0.101563,0.11719 0.06641,0.0977 0.06641,0.082 0.08203,0.082 0.01563,0.0195 0.199218,0.18359 0.21875,0.14844 0.234375,0.13281 0.234375,0.11719 0.214844,0.082 0.234375,0.0859 0.445313,0.11719 0.203125,0.0469 0.179687,0.0352 0.167969,0.0156 0.148437,0.0156 0.117188,0.0195 h 0.167969 l 0.316406,-0.0195 0.285156,-0.0312 0.28125,-0.0508 0.265625,-0.0508 0.230469,-0.082 0.234375,-0.082 0.21875,-0.0859 0.179687,-0.10156 0.167969,-0.0977 0.152344,-0.0859 0.117187,-0.0781 0.117188,-0.0859 0.07813,-0.0508 0.05078,-0.0469 0.05078,-0.0508 0.183594,-0.20313 0.167969,-0.19531 0.128906,-0.20312 0.117188,-0.21485 0.117187,-0.20312 0.08594,-0.21485 0.117187,-0.3789 0.04687,-0.1875 0.03516,-0.16407 0.01563,-0.15234 0.01953,-0.11719 0.01563,-0.0977 v -0.14844 l -0.01563,-0.38672 -0.07031,-0.34766 -0.09766,-0.3164 -0.101563,-0.26563 -0.09766,-0.21875 -0.101562,-0.16406 -0.06641,-0.0977 -0.01953,-0.0195 v -0.0156 l -0.230469,-0.26563 -0.25,-0.23437 -0.265625,-0.1836 -0.25,-0.16796 -0.230468,-0.11329 -0.203125,-0.0859 -0.06641,-0.0312 -0.05078,-0.0195 -0.03125,-0.0117 H 70.3125 l 0.300781,-0.13672 0.246094,-0.14844 0.21875,-0.15234 0.183594,-0.14844 0.128906,-0.13281 0.101563,-0.0977 0.06641,-0.0703 0.01953,-0.0312 0.148438,-0.23438 0.101562,-0.23437 0.07813,-0.23047 0.05078,-0.23438 0.03516,-0.18359 0.01953,-0.14844 v -0.13281 l -0.01953,-0.23437 -0.01563,-0.21875 -0.117188,-0.41407 -0.148437,-0.36328 -0.167969,-0.32031 -0.167969,-0.24609 -0.08203,-0.10157 -0.06641,-0.10156 -0.148438,-0.14844 -0.183594,-0.15234 -0.183593,-0.14844 -0.199219,-0.11719 -0.199219,-0.0977 -0.402344,-0.15235 -0.398437,-0.0977 -0.164063,-0.0508 -0.167968,-0.0156 -0.152344,-0.0195 -0.132813,-0.0117 -0.09766,-0.0195 h -0.148437 z m 0,0"
       style="fill:#ff00f3;fill-opacity:1;fill-rule:evenodd;stroke:none" />
    <path
       id="path218"
       d="m 68.542969,236.8125 h 0.136719 l 0.28125,0.0156 0.269531,0.0625 0.214844,0.0859 0.199218,0.0977 0.152344,0.10156 0.113281,0.082 0.08203,0.0703 0.01953,0.0156 0.183594,0.21484 0.132812,0.21875 0.09766,0.21485 0.07031,0.19922 0.03125,0.18359 0.03516,0.14844 v 0.13672 l -0.01953,0.26171 -0.06641,0.25391 -0.08203,0.21484 -0.101562,0.1836 -0.09766,0.14844 -0.08594,0.10156 -0.06641,0.082 -0.01563,0.0156 -0.199219,0.16797 -0.234375,0.13282 -0.214844,0.082 -0.214843,0.0664 -0.203125,0.0352 -0.148438,0.0156 -0.09766,0.0195 h -0.03516 l -0.300782,-0.0195 -0.265625,-0.0664 -0.234375,-0.082 -0.199218,-0.0977 -0.148438,-0.0859 -0.117187,-0.082 -0.08594,-0.0664 -0.01172,-0.0195 -0.167968,-0.19921 -0.132813,-0.23047 -0.08594,-0.21875 -0.06641,-0.21485 -0.03125,-0.18359 -0.01953,-0.14844 -0.01172,-0.10156 v -0.0352 l 0.01172,-0.26172 0.06641,-0.23437 0.08594,-0.21875 0.09766,-0.18359 0.08594,-0.14844 0.08203,-0.11719 0.06641,-0.0664 0.01953,-0.0156 0.214844,-0.18359 0.214844,-0.13282 0.234375,-0.0859 0.214844,-0.0625 0.199218,-0.0352 z m 0,0"
       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />

       </g>
</svg>
Fuzzyma commented 3 years ago

Just merge the 2 paths together and use fill-rule evenodd and it should do exactly that!