Why no support for svg a element?

87 views
Skip to first unread message

Blaine Simpson

unread,
Oct 25, 2020, 1:28:24 PM10/25/20
to Snapsvg
a element has been in SVG since version 1.1.  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a .  svg.js supports it, https://svgjs.com/docs/3.0/container-elements/#svg-a

I do have a work-around by cloning a declarative a element that I use as a template.  I'll make a plugin for snap.a to automate that.  (I don't want to create a element HTML from scratch because I don't know how to do that in Snap and based on code in src/path.js it'd be a massive effort implementing dozens of functions).

I'd prefer that plugin not have a dependency on a declarative element, but Snap's not working with W3C JavaScript-created elements.  That limitation isn't a-element-specific so I'll write a separate post about that.

Ian

unread,
Oct 25, 2020, 5:20:53 PM10/25/20
to Snapsvg
Note, you can create any element you want with the el() method, eg http://snapsvg.io/docs/#Paper.el

So you should be able to do   

var a =  s.el("a").attr({ "href": "http://www.test.com" });

You could simply turn that into a plugin for a() if you really wanted.

Ian

unread,
Oct 25, 2020, 5:30:43 PM10/25/20
to Snapsvg
You may also need "xlink:href" rather than "href" in my reply as well actually.

On Sunday, 25 October 2020 at 17:28:24 UTC Blaine Simpson wrote:

Blaine Simpson

unread,
Oct 26, 2020, 8:17:02 PM10/26/20
to Snapsvg
(Here is repeat of what I sent to Ian yesterday, for historical benefit of the group.  Don't know why the email headers are set up so that replies go to the individual author instead of the group by default).

So many great functions in the library and it's hard to know what to search for on the API page.  el's a great function.  Thanks!

Works just as you said.  For consistency, and for the same convenience I get from setting say rectangle attributes via instantiation parameters, I did put it into my plugin.

        Paper.prototype.a = function(href, target) {
            const attrs = {href: href};
            if (target !== undefined) attrs.target = target;
            return this.el("a").attr(attrs);
        };

I don't need the legacy "xlink:" prefix.  I have the luxury of not needing to support legacy browsers.
Reply all
Reply to author
Forward
0 new messages