SVGs inserted with use tag not displaying ~5

[justinbmeyer]

Summary

SVG with <use xlink:href> is not working. There's a pull request here: #2438 though I'm not sure it's the right way of doing it. I think we need a more general way of identifying the right namespace. Once fixed in 2.3, fix in 3.0 in this issue.

Original issue

Originally reported here: donejs/donejs#647

Inserting an svg with the use tag displays the svg when rendered from the server, but rendering from the client shows a container the correct size but does not display the svg.

This displays an empty space 70px square:
icons.txt

<svg role="img" width="70" height="70" >
    <use xlink:href="../../src/assets/images/icons.svg#ting" />
</svg>

This works as expected:

<svg width="70px" height="70px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <path fill="#0AE" d="M4.66 5.05c-0.5 0-0.86-0.41-0.86-0.91c0-0.5 0.36-0.91 0.86-0.91c0.5 0 0.86 0.41 0.86 0.91 C5.52 4.64 5.16 5.05 4.66 5.05z"/>
            <path fill="#0AE" d="M10.23 11.24H9.35c-0.17 0-0.31-0.14-0.31-0.31V7.24c0-0.28-0.12-0.49-0.48-0.49c-0.5 0-0.86 0.48-0.86 1.15 v3.02c0 0.17-0.14 0.31-0.31 0.31H6.51c-0.17 0-0.31-0.14-0.31-0.31V5.88c0-0.17 0.14-0.31 0.31-0.31h0.67 c0.19 0 0.29 0.12 0.32 0.28l0.08 0.37c0.44-0.48 0.93-0.73 1.53-0.73c0.87 0 1.43 0.58 1.43 1.46v3.98 C10.55 11.1 10.41 11.24 10.23 11.24z"/>
            <path fill="#0AE" d="M13.52 13.61c-1.24 0-2.43-0.41-2.47-1.76c0-0.17 0.14-0.34 0.31-0.33l0.83 0.03 c0.19 0.01 0.24 0.12 0.29 0.29c0.12 0.47 0.59 0.59 1.07 0.59c0.75 0 1.1-0.3 1.1-0.68c0-0.4-0.15-0.51-0.72-0.51h-1.21 c-0.61 0-1.38-0.19-1.38-1.06c0-0.37 0.2-0.68 0.46-0.92c-0.48-0.36-0.77-0.93-0.77-1.65c0-1.35 0.88-2.11 2.24-2.11 c0.25 0 0.48 0.05 0.72 0.05h1.38c0.27 0 0.36 0.12 0.36 0.33v0.37c0 0.26-0.06 0.3-0.22 0.34l-0.3 0.07 c0.17 0.29 0.32 0.58 0.32 0.96c0 1.29-0.85 2.12-2.25 2.12c-0.19 0-0.37-0.02-0.54-0.06C12.7 9.76 12.67 9.8 12.67 9.9 c0 0.2 0.19 0.22 0.37 0.22h1.09c1.14 0 1.87 0.51 1.87 1.56C16 13.16 14.59 13.61 13.52 13.61z M13.3 6.63 c-0.44 0-0.78 0.13-0.78 0.97c0 0.89 0.35 1.02 0.78 1.02c0.39 0 0.79-0.17 0.79-1.02C14.08 6.75 13.72 6.63 13.3 6.63z"/>
            <path fill="#0AE" d="M5.12 5.57H2.41c0 0 0-1.29 0-1.3V3.91c0-0.18-0.14-0.31-0.31-0.31H1.22C1.04 3.6 0.9 3.74 0.9 3.91l0 1.65 H0.31C0.14 5.57 0 5.71 0 5.88v0.51c0 0.17 0.14 0.31 0.31 0.31H0.9v3.17c0 0.89 0.38 1.44 1.35 1.44c0.41 0 0.85-0.07 1.12-0.16 c0.15-0.05 0.22-0.16 0.2-0.31l-0.14-0.73C3.4 9.92 3.28 9.85 3.1 9.9C3.01 9.92 2.86 9.93 2.76 9.93c-0.21 0-0.35-0.14-0.35-0.45 V6.71h1.52v4.22c0 0.17 0.14 0.31 0.31 0.31h0.88c0.17 0 0.31-0.14 0.31-0.31V5.88C5.44 5.71 5.3 5.57 5.12 5.57z"/>
        </svg>

[Krakabek]

Same problem
Do you have any plans about what version this bug will be fixed in?

[cleong-tc]

hi @justinbmeyer, i work with the op (@justthismorning).

i investigated the issue farther and found that the svg-element has dimensions (70px by 70px), but the (child) use-element does not have dimensions (0px by 0px) (vs ting.com).

when i inspect (with chrome) the use-element (in 'Properties' sidebar), the 'use' | 'href: SVGAnimatedString' is missing the svg-uri for baseVal & animVal (vs ting.com & initial-server-render).

i believe can.stache is not calling the namespace-specific set-attribute function (i.e. el.setAttributeNS())...

var svgUri = '../..//static/images/icons.svg#ting';
useEl.setAttributeNS('http://www.w3.org/1999/xlink', 'href', svgUri);

what is the best way to set el.setAttributeNS() in can.stache?

[matthewp]

@tracer99 is experiencing this issue and is blocking him from using client-side routing, just to note. Partially to myself so that I make the effort to fix it in 3.0.

[justinbmeyer]

@matthewp do you mean server side rendering? I'm not sure what routing has to do w/ this?

[phillipskevin]

I closed #2438 since it was pointing to the master branch which now has the 3.0 code. @colin-tucows if you submit a new pull request to the 2.3-legacy branch we can get that fix into a 2.3 release.