Показать внешний SVG с тегом <use>и атрибутом href или xlink: href?

Question

SVG не отображается правильно, когда он загружен из тега <use>.Я добавил тег img для иллюстрации ожидаемого результата.

Пример кода:

    <svg>
      <use xlink:href="file.svg" href="file.svg"></use>
    </svg>
    <img src="file.svg" />  

Текущий вывод:

Рабочая скрипка: демо

Спасибо всем, кто может указать на мою ошибку.

Answer 1

1. У вас есть эта ошибка: Небезопасная попытка загрузить URL https: ..... svg из фрейма с URL https: // ...... Домены, протоколыи порты должны соответствовать

2. Вам необходимо использовать идентификатор объекта SVG, который вы хотите использовать

  <svg viewBox="0 0 14 16" width="50">
    <use xlink:href="sof.svg#id" fill="red"/>
  </svg>

Пожалуйста, посмотрите на этот пример: https://codepen.io/enxaneta/project/editor/91143c063e6b9abf1b5c43a14a9937ea

Answer 2

Элемент <use> копирует элемент, на который вы ссылаетесь из атрибута href.Вы не можете указать file.svg напрямую, вам нужно указать id элемента.

<use xlink:href="path/to-the-file.svg#the-element"/>

// since we can't store file in StackSnippets we'll download it first
fetch('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
.then(r => r.blob())
.then(b =>
  // and create a blobURI, with the id of a <g> Element
  use.setAttributeNS(
    'http://www.w3.org/1999/xlink', 'href',
    URL.createObjectURL(b) + '#g4'
  )
);

<svg width="200" height="200" viewBox="0 0 900 900">
  <use id="use"/>
</svg>

Но учтите, что элемент мог бы также отображать ваше изображение напрямую (даже если вы потеряете небольшой элемент управления, который у вас может быть :

<svg width="200" height="200" viewBox="0 0 200 200">
  <image width="200" height="200" xlink:href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"/>
</svg>