SVG Line Segment Delete

It’s unfortunate that SVG does not provide native DOM methods for finding line intersects — or cutting out part of a path from an existing shape to create, say, a disjointed line.*

Here’s why.

In a prior post, I showed you several versions of the Octogon45 pattern, animated as well as filled.

The initial SVG code was created using XVG, an SVG design tool that I am developing, albeit slowly.

The XVG output looked like this.

Islamic design pattern

However, this actual pattern is supposed to look as follows:

svg islamic geometry


Unfortunately, there is currently no way to delete the interior part of a line segments in XVG.  SVG clip-path is of no help in this regard, even if I had the needed coordinates, as it does the opposite of what I want.

I temporarily worked around this problem by positioning the mouse in XVG over the spots where I needed to demark the line segment that needed to be cut. (XVG displays x/y coordinates dynamically under the SVG workspace.)

Then I hand coded a new SVG line, and manually adjusted its end points, as well as the new endpoints of the line I previously drew using XVG.

This was time-consuming and not as exact as perhaps could be achieved using a JS function to automatically calculate the desired end points.  (Plus I cannot expect an XVG end-user to want to engage in this tedious exercise!)

I thought about what kind of algorithm might work, something that would be easy to program.


Eventually it dawned on me that calculating the slope of each  diagonal  would be a promising start.

svg slope intersection

The next post explains the solution I came up with.

*with the exception of the pathLength attribute, which can produce a disjointed line with a single gap in its middle (see example 4 here).  However, this would not work for our purposes.

# # #