Привязка Lit-Element к svg-изображению. TypeError: Не удается прочитать свойство «разделить» на ноль

Я пытался привязать простой URL-адрес (строку) к тегу изображения внутри элемента svg.
Но я получаю следующую ошибку: TypeError: Cannot read property 'split' of null и в браузере не отображается изображение.

Изображение, а также привязка работают нормально и без ошибок внутри обычного тега <img> или жестко запрограммированы в элементе <image/>.

Пример с SVG:

import { LitElement, svg } from 'lit-element';

class AppDevice extends LitElement {
static get properties() {
    return {
        selectedImage: {
            type: String
        }
    };
}

constructor() {
    super();
    this.selectedImage = 'https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png';
}

render() {
    return svg`

        <svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

             <image xlink:href="${this.selectedImage}" id="canvas" x="176.32" y="145.932" width="252.068" height="252.068"/>
             <!-- Works -->
             <!-- <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" id="canvas" x="176.32" y="145.932" width="252.068" height="252.068"/>      -->

        </svg>

`;
}
}

Пример обходного пути:

После прочтения обсуждения на github, которое было указано в комментариях к этому вопросу, я обновил свой ответ:

введите здесь описание изображения

const namespaced = directive((namespace, value) => (part) => {
       part.committer.element.setAttributeNS(namespace, part.committer.name, value);
    });

const xlinkNamespace = 'https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png';

import { LitElement, html } from 'lit-element';

class AppDevice extends LitElement {
  static get properties() {
    return {
    };
   }

constructor() {
  super();
}

render() {
   return html`

    <svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

      <image xlink:href="${namespaced(xlinkNamespace, 'something')}" id="canvas" x="176.32" y="145.932" width="252.068" height="252.068"/>

    </svg>

    `;
}
}

javascript data-binding polymer lit-element lit-html
person Niklas    schedule 20.03.2019    source источник
comment
Пробовали ли вы использовать метод svg из lit-html?   -  person abraham    schedule 21.03.2019
comment
Спасибо за ответ @abraham. К сожалению, мне не удалось заставить его работать. Я разместил еще один пример кода. Это то, что вы имели в виду?   -  person Niklas    schedule 22.03.2019
comment
Это проблема с lit-html, не поддерживающей атрибуты пространства имен. Ближе к концу есть несколько обходных путей.   -  person abraham    schedule 22.03.2019
comment
Спасибо, кажется, это то, что я ищу. Хотя не уверен, что понимаю. Глядя на codepen, я задаюсь вопросом, для чего предназначена вторая функция рендеринга. codepen.io/anon/pen/gQKgbE?editors=1010 Обновлен мой ответ снова   -  person Niklas    schedule 22.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку мне не удалось заставить пример из комментариев работать, я придумал другое решение моей проблемы. Хотя это не тот ответ, который я искал, я решил, что размещение его здесь может быть хорошей идеей.

Без лишних слов вот мое решение:
я использовал css clip-path для отображения изображения внутри моего элемента SVG и, в частности, имел возможность переключать его с помощью привязок.

Вот статья об отсечении и маскировании

<img .src="${this.selectedimg}" style="clip-path: url(#myClip);" width="250" height="250">

<svg>
  <defs>
    <clipPath id="myClip">
      <rect width="250" height="250"/>
    </clipPath>
  </defs>
</svg>
person Niklas    schedule 31.03.2019