Lit-element: Refrencing external svg file not working in safari.

Created on 25 Nov 2018 · 6Comments · Source: Polymer/lit-element

For some reason the following code doesn't work in Safari.
Refrencing external svg files doesn't work in safari with lit-element.
The code does work with lit-html tho.
Could someone explain to me why this bug only apears in lit-element.
Is it a shadowDom bug or something?

namespacedAttr = directive (namespace, value) -> (part) ->
  part.committer.element.setAttributeNS(
    namespace
    part.committer.name
    href
  )

Does work

xlink = 'http://www.w3.org/1999/xlink'
href = '/icon.svg#icon-send'
template = html"
  <svg>
    <use xlink:href='#{ namespacedAttr xlink, href }' href='#{ href }'></use>
  </svg>
"

render template, document.body

Not working

export default class IconSvg extends LitElement
  render: ->
    xlink = 'http://www.w3.org/1999/xlink'
    href = '/icon.svg#icon-send'
    return html"
      <svg>
        <use xlink:href='#{ namespacedAttr xlink, href }' href='#{ href }'></use>
      </svg>
    "

Medium Bug

Source

ivands

Most helpful comment

I found the answer here: https://github.com/Polymer/lit-html/issues/423 (all the way at the bottom).

There's a directive you can add to support the xlink:href attribute (a namespaced attribute) in Safari.

kevinmpowell on 20 Mar 2019

🎉1 👍1

All 6 comments

I have the same issue that I tried to solve today without any success.
@ivands Does it cause problems only in safari? Because I have similar problems also in chrome.

kuka-radovan on 26 Nov 2018

@kuka-radovan chrome works fine for me because chrome uses the href attribute.
Safari is still using the xlink:href attribute that I'm guessing is the cause of the problem.

ivands on 27 Nov 2018

Maybe loading external SVG files into a custom element isn't the way to go.
In chrome the external SVG is loaded each time I use my custom element.
The browser doesn't even cache the SVG. 😭

ivands on 27 Nov 2018

The following seems to run fine on Safari 12.0.2, so don't think it's a shadowRoot/namespace issue:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <lit-element></lit-element>
  <script type="module">
    import {directive} from 'https://unpkg.com/lit-html?module';
    import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element?module';

    const namespace = 'http://www.w3.org/1999/xlink';
    const href = 'https://www.polymer-project.org/images/logos/p-logo.svg';

    const namespacedAttr = directive((namespace, value) => (part) =>
      part.committer.element.setAttributeNS(
        namespace,
        part.committer.name,
        href
      )
    );

    customElements.define('lit-element', class extends LitElement {
      render() {
        return html`
        <svg id="svg" width="100" height="100" viewBox="0 0 100 100"
             xmlns="http://www.w3.org/2000/svg">
          <image xlink:href=${namespacedAttr(namespace, href)} x="0" y="0" height="100" width="100"/>
        </svg>
        `;
      }
    });
  </script>
</body>
</html>

https://jsbin.com/qamizaz/edit?html,output

keanulee on 12 Dec 2018

This issue still exists and I ran into it today. I can confirm @ivands original issue. His reduced test cases show it working with lit-html but not with lit-element, which I've replicated.

The example @keanulee provided is not doing the same thing. In @keanulee's example the SVG is using the <image> tag within the svg, not the <use> tag.

I'd like to see a working example in lit-element that uses the <use> tag.

kevinmpowell on 20 Mar 2019

I found the answer here: https://github.com/Polymer/lit-html/issues/423 (all the way at the bottom).

There's a directive you can add to support the xlink:href attribute (a namespaced attribute) in Safari.

kevinmpowell on 20 Mar 2019

🎉1 👍1

Was this page helpful?

0 / 5 - 0 ratings