Handle file links within inline SVG elements

[Tauris]

Currently, the extension does not handle file links within inline SVG elements. Could this be added?

Here is how this looks in principle:
<svg preserveAspectRatio="xMinYMin slice" style="width: 100%; height: 1px; overflow: visible; box-sizing: content-box; padding-bottom: 50%;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 200"> <image xlink:href="https://mysite.com/image.png" width="400" height="200"></image> <a xlink:href="file://c:/"><circle opacity="0" fill="#fff" cx="111" cy="201" r="81"><title>C:</title></circle></a> </svg>

Some background about why this would be useful:

In my use case, it is used as an alternative to image maps (img/map combinations). The normal image map is preprocessed to an SVG with an <image> element and geometry within <a> elements instead of the <area> elements of the <map>.
This enables automatic percentage based sizing of the image map, making the layout responsive, something that can otherwise not be achieved without using Javascript code for resizing. It is meant for a CMS in which all Javascript introduced by user content is removed.

[Tauris]

I have looked at the code myself. I had hopes that all it would take is adding xlink:href to the fileSelectorLinks initialization in src/extensions/contents.js

var fileLinkSelectors = [
            'a[href^="file:"]'
            /*'a[href^="smb://"]',
            'a[href^="afp://"]'*/
        ],

Unfortunately Jquery does not support namespaces out of the box. This would probably need to use a custom selector extension or a filter like so:

fileAnchors = $("a").filter(function() {
  let item = this.attributes.getNamedItem("xlink:href");
  return item  && item.value.startsWith("file:");
});

When later querying the href attribute, one should then also look for xlink:href.
This is not bulletproof, since there is nothing forcing one to use xlink as the identifier for the xlink namespace, but I believe that most people follow this convention.

[AWolf81]

Hi @Tauris, thanks for creating the issue. I like the idea to add SVG links.

I'll have a look later today. I played a bit with your code in the following jsfiddle. I think that should work.

[Tauris]

Thank you for the quick response. Your jsfiddle looks good. There is one thing to keep in mind: It will not work to place a directory symbol behind the link within an SVG. I really like the feature to open the corresponding directory though. One would need to create some other mean of selecting the directory instead of the file. A modifier key like Shift maybe? "Open in new window" is not a function that we would need at that point. Maybe this could be the discriminator for choosing the directory instead of the file.