Ability to generate a new path based on two intersecting paths.

[GoogleCodeExporter]

today by discussing issue 249 (wormsxulla and me) we recognized that
currently we can't use intersections of polylines. If two polylines are
overlapping they are always two polylines and the intersection can't be for
example filled by an other color.

in inkscape it is possible to fill an intersections of polylines. Also this
new shape can be moved.

Original issue reported on code.google.com by rb.p...@gmail.com on 5 Oct 2009 at 7:46

[GoogleCodeExporter]

I'm sorry I didn't understand this.  Can you provide a step-by-step example of 
what
you're looking for?

Original comment by codedr...@gmail.com on 12 Oct 2009 at 3:18

• Changed state: NeedsInfo

[GoogleCodeExporter]

my take: 

usecase for intersection:
1. select 2 polylines, noted A, B
2. press a button and have a 3-rd polyline, C, created that is essentially the 
area
of canvas that is common to the first 2: A _and_ B
3. output: the 3-rd polyline, selected, with ability to change it's fill, etc

same can be done for: 
union: A _or_ B
substraction: A _minus_ B, B _minus_ A
disjunction: (A _minus_ B) _or_ (B _minus_ A)

Original comment by Christia...@gmail.com on 22 Oct 2009 at 8:13

[GoogleCodeExporter]

I'm guessing Inkscape generates a new path based on this intersection...if 
someone could perform this action in Inkscape and attach the SVG, that might be 
helpful. So I'm thinking something like a Venn diagram with the overlap being 
in another color.

Original comment by adeve...@gmail.com on 27 Jul 2010 at 3:56

• Changed title: Ability to generate a new path based on two intersecting paths.
• Changed state: Accepted
• Added labels: Section-PathEditing

[GoogleCodeExporter]

Original comment by adeve...@gmail.com on 16 Aug 2010 at 6:22

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Very useful feature. Essential actually. Currently you can't design even 
semi-sophisticated shape like logos without it. Otherwise, svg-edit has all 
essential features for very large part of vector graphics works. Awesome job !

Original comment by yvan2...@gmail.com on 10 Dec 2010 at 11:16

[GoogleCodeExporter]

there is an implementatation of boolen SVG-Functions with processing.js. Maybe 
this could be a starting point: 
view-source:http://processingjs.nihongoresources.com/shapeboolean/ 

Original comment by m.niqu...@googlemail.com on 24 Oct 2011 at 3:34

[GoogleCodeExporter]

Boolean SVG functions are desperately needed for SVG-Edit.  I would use it as 
my go-to app for creating vector icons for the web if this feature is included. 
 Without it designers hoping to move from Photoshop/Illustrator won't give it a 
second glance.

Original comment by davies...@gmail.com on 21 May 2013 at 8:13

[GoogleCodeExporter]

Javascript Clipper is an unbelievably good choice for Boolean Operations on SVG 
elements. The algorithm works in all cases.

However the paths must be converted to polygons first. They can be converted to 
polygons and passed to the library(JavaScript Clipper) and then re-converted to 
curvy paths using a curve fitting algorithm.

This is all i can offer and i am doing so because JS Clipper works definetely 
in all cases. Of course a pure curve library is even better.

Original comment by nicholas.kyriakides@my.westminster.ac.uk on 21 May 2013 at 7:51

[GoogleCodeExporter]

Is there a version of SVG-Edit with Javascript Clipper integration?  When I 
google it I see there are a few stack overflow questions from guys trying it.  
To design vector logos, icons and fonts all I need is the shape tool, pen tool, 
and the boolean functions (union, subtraction, intersection, xor). I'm sure 
other designers would agree with me.

Original comment by davies...@gmail.com on 22 May 2013 at 4:06

[GoogleCodeExporter]

The S.O questions you have read are probably from us. JS Clipper is good as 
suggested previously but the path-to-poly and vice versa conversion might prove 
wrong for use in SVG-edit. The conversions are approximation algorithms and 
this will at a small degree distort the original shapes.

I am not sure but JS Clipper solution might also distort the position of the 
original shapes control points upon converting to polygons and then back to 
curves.

The best solution is someone porting an existing "Boolean Operations On True 
Curves " library to JavaScript and then using that within SVG-edit. Inkscape 
which is open source has great BoolOps functionality which results in true 
curves compound shapes.. Maybe someone could port the library that Inkscape 
uses to Javascript and use that within SVG-edit.

As i mentioned to David in emails, "VectorEffects in SVG 1.2" reccomend a 
native BoolOps functionality which i suspect will be a true curve operation.  
However last time i read about this SVG 1.2 was a draft so i am not sure if 
this functionality will make it in the final implementation and i am also not 
sure when SVG 1.2 will be released although i think sometime in 2014 which is 
not too far away.

This is what i have read some time ago regarding SVG 1.2 and Boolean Operations:
http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffectsPrimer.html

Original comment by nicholas.kyriakides@my.westminster.ac.uk on 25 May 2013 at 12:22

[GoogleCodeExporter]

The SVG 1.2 spec unfortunately appears to be obsolete now, as the current draft 
SVG 2.0 spec is based on SVG 1.1 2nd edition.

http://www.w3.org/TR/#tr_SVG - see SVG 1.2 in the Obsolete section
http://www.w3.org/TR/SVG2/ - read under 'Status of this Document' near the 
beginning

I found an implementation of boolean SVG functions in paper.js here:
http://paperjs.org/static/boolean/

Original comment by davies...@gmail.com on 25 May 2013 at 7:28

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Paper.js is a canvas library, not an SVG library.

If someone can port their code to SVG then that should be allright.
AFAIK the pathstring formats are the same between Paper.js and SVG and Paper.js 
is supposed to fully support SVG export from their ''canvas''.

The boolOps algorithm's there might be a nice guide to whoever wishes to start 
writing an SVG boolOps algorithm. 

It doesn't sound trivial though..

Original comment by nicholas.kyriakides@my.westminster.ac.uk on 10 May 2014 at 5:23

[GoogleCodeExporter]

Looks like Paper.js's Path has a initialize() method that takes SVG path data...

Original comment by codedr...@gmail.com on 16 Aug 2014 at 12:12