CODEWITHSUNDEEP
svgsnap.svg
gaurav
gaurav

Reputation: 15

Snap.svg failing to .transform() for <use> tag element

I have an use element in my svg like

<use x="47.46" y="44.64" cx="48" cy="45" id="9zh7" href="#msi_plane" class="markerpoint"></use>

I have a hover function which transform .markerpoint class element on hover:-

$('.markerpoint').hover(
    function() {
      var mySnapElement = Snap(this);
      mySnapElement.transform('s1.5');
    }
    function() {
      mySnapElement.transform('s1');
    }
)

Transform is working fine for other element of svg like <circle ....> or <rect ....> but throwing error for <use ...> tag

Error response data:-

snap.svg.js:2786 Uncaught TypeError: Cannot read properties of null (reading 'substring')
    at Element.elproto.getBBox (snap.svg.js:2786)
    at extractTransform (snap.svg.js:2834)
    at Element.elproto.transform (snap.svg.js:2896)
    at SVGUseElement.<anonymous> (main.js:1023)
    at SVGUseElement.handle (jquery.min.js:2)
    at SVGUseElement.dispatch (jquery.min.js:2)
    at SVGUseElement.v.handle (jquery.min.js:2)

Seems like it is limitation of Snap.svg in handling <use>

Looking for hacks or suggestion for way forward

Upvotes: 1

Views: 63

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

It seems from a quick perusal of the source code that Snap.svg does not support bare href but requires you to use xlink:href

The use of href is new in SVG 2, SVG 1.1 was xlink:href only.

Upvotes: 3

Related Questions