css - 如何将 SVG 嵌入到单个 hta/htm 文档中？

Question

我的最终目标是像这样使用 svg 图像作为 css 背景:

#somelement {
  background: transparent url(#embededSvg) repeat-x;
}

我需要(想要*)两件事来工作， 1. svg 嵌入到文档中(但不像 block 一样呈现)女巫我可以实现:

    Skip<svg ... style="display:none;">...</svg>

1. 作为 css 背景在其 x 轴上循环的 svg(不使用 hta/htm 文档打包无关的文件)。

我已经尝试将 svg 创建为 Javascript Image 对象并将对象 innerHtml 设置为 svg，但我不确定如何在 css 中引用 Image 对象。

Answer 1

您的想法是对的，您可以像链接图像文件一样链接 SVG:

<style>
  #somelement {background: transparent url('someimage.svg') repeat-x;}
</style>

或者甚至像这样:

<style>
  #somelement {background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D') repeat-x;}
</style>

并非所有浏览器都支持 CSS 背景中的 SVG。此处显示了对此的浏览器支持:

http://caniuse.com/#feat=svg-css