Как встроить автономный код SVG?

Question

У меня есть библиотека JavaScript с выводом SVG.Для простоты, скажем

line(color).

, чтобы

line('red')

выводил

<svg>
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100">
</svg>

Проблема в том, что если я попытаюсь добавить несколько из этих SVG с другим цветомВ качестве аргументов для моей страницы класс .color перезаписывается, так что только последнее определение класса применяется ко всем SVG.Как здесь

<svg>
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100">
</svg>
<svg>
  <style>
    .color {
      stroke: blue;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100">
</svg>

https://codepen.io/anon/pen/RyyvxE

Одним из способов решения этой проблемы является встраивание SVG в iframe с.Тем не менее, я прочитал, что iframes должны использоваться только в одиночку, так как они являются дорогостоящими в вычислительном отношении.Может быть, есть какой-то способ превратить код SVC с JavaScript в URI данных и использовать его в теге object?Или как лучше всего использовать такие разные SVG на веб-сайте?

Answer 1

В ходе полезной дискуссии с Робертом Лонгсоном я нашел, по крайней мере, два способа получить автономные SVG-коды для кода SVG, описанные выше: использование тега img, который, как мне кажется, заставляет SVG вести себя как растровое изображение, и использование *Тег 1002 *.Подробности ниже.

Либо, используйте img и просто установите код SVG в качестве данных:

<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>' alt="" />
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: blue;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>' alt="" />

https://codepen.io/anon/pen/oddKyZ

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

В качестве альтернативы можно использовать object, например:

<object type="image/svg+xml" data='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: red;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>'>
</object>
<object type="image/svg+xml" data='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <style>
    .color {
      stroke: blue;
    }
  </style>
  <line class="color" x1="0" y1="0" x2="100" y2="100"/>
</svg>'>
</object>

https://codepen.io/anon/pen/errqLY

Примечание! Есть некоторые символы, которые, по крайней мере, некоторые браузеры не могут интерпретировать в URI.Например, firefox не допускает хэш (#), который является обычным в определениях SVG url() и должен быть заменен на %23.Я полагаю, что можно было бы использовать JavaScript encodeURIComponent() для правильного кодирования SVG.