Obsolete: xpath / Nokogiri: Find all nodes in a SVG path.
Posted 06-09-2022 at 02:41 PM by Michael Uplawski
Updated 11-24-2023 at 11:44 PM by Michael Uplawski (Code examples updated, comments are better, too, French2English (this is awkward – am I losing my German?))
Updated 11-24-2023 at 11:44 PM by Michael Uplawski (Code examples updated, comments are better, too, French2English (this is awkward – am I losing my German?))
In an attempt to render Hyperlinks in SVG more comfortable, I had begun to enlarge the mouse-sensitive area around a linked content by creating a transparent rectangle around the link.
In the meantime, other techniques are swifter applied and probably easier used in a scripted routine.
This is historical, now. For your inspiration, the original blog-post:
------------------------------------------------------------------------------
Work in Progress.
EDIT 18.6.2022: Today, I have learned three things:
I need all nodes of all paths of a linked graphical object in an SVG file. As I work with handwritten text, those objects are combinations of several paths, sometimes grouped.
The following xpath finds the node definitions from the attribute “d” of the first path which is a descendant of a link in SVG:
Here is a command line which uses the nokogiri executable to print the nodes to screen:
My objective is now to determine the four corners of the rectangle that encloses all these paths (the four extreme values from the “d” attributes...). With that, I will draw a transparent rectangle around the linked objects, widen it by a few pixels, give it the “pointer-events:all” attribute. All will be grouped and the link-tag be moved to the outside. This way, the rectangle will be clickable, though transparent and a user will no longer have to point at a possibly very fine line to activate the link.
In the meantime, other techniques are swifter applied and probably easier used in a scripted routine.
This is historical, now. For your inspiration, the original blog-post:
------------------------------------------------------------------------------
Work in Progress.
EDIT 18.6.2022: Today, I have learned three things:
- What I want is called a “Bounding Box Calculator”.
- I hate JavaScript a little more, now
- My own solution, so far, is crap.
I need all nodes of all paths of a linked graphical object in an SVG file. As I work with handwritten text, those objects are combinations of several paths, sometimes grouped.
The following xpath finds the node definitions from the attribute “d” of the first path which is a descendant of a link in SVG:
Code:
//a[@href]//descendant::path[1]").attribute("d").value
Code:
cat file.svg | nokogiri -e 'p $_.xpath("//a[@href]//descendant::path[1]").attribute("d").value'
Total Comments 1
Comments
-
As there are absolute and relative coordinates in a <path/>, the latter must be transformed to absolute values if they will serve to position a new graphical object on the same canvas.
My sought procedure to calculate the bounding box of an arbitrary path must include a path-parser: It must “react” to path commands (like 'M', 'm', 'z'), then either store the following coordinates or transform them to 'absolute values'. Interruptions within the same path must be detected (subsequent 'm', 'M' after 'z') and new “initial points” be set accordingly.
I will program this but already feel on my way to solve the riddle...
There is a bunch of software around which does exactly that, but (HELL!) I do not like it. And I want to know what I do. “Other software” does a lot more than I want and lacks code comments. If I must rely on rubbish code, it should be my own rubbish! – I do not reinvent the wheel, but make square wheels round and smooth.Posted 06-21-2022 at 12:38 AM by Michael Uplawski 
Updated 06-21-2022 at 12:42 AM by Michael Uplawski ('z')
