如何嵌入独立的SVG代码？

Question

我有一个带SVG输出的javascript库。为简单起见，比方说

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嵌入iframes。但是，我读到iframe只能被闲置使用，因为它们的计算成本很高。也许有一些方法可以将带有JavaScript的SVC代码转换为数据URI并在object标记中使用它？或者如何在网站中最好地使用这些不同的SVG？

Answer 1

通过与Robert Longson的有益讨论，我发现至少有两种方法可以获得上面SVG代码的SVG标准：使用img标记，这使得SVG的行为类似于位图，我相信，并使用object标记。详情如下。

或者，使用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。