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.
However, this actual pattern is supposed to look as follows:
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.
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.
# # #
