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

Question

我的最终目标是使用 svg 图像作为 css 背景，如下所示：

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

我需要（想要*）两件事才能工作，1. svg 嵌入到文档中（但不是像块一样呈现）女巫我可以实现：

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

svg 在其 x 轴上循环作为 css 背景（不使用 hta/htm 文档打包多余的文件）。

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

score 0 · Accepted Answer

您有正确的想法，您将链接 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

score 0 · Accepted Answer

SVG 可以通过 6 种方式添加到页面中，

它们是：

1) 对象标签

3) 框架

4) 内联 SVG

5) IMG 标签

6） CSS

看到这个：https ://www.sitepoint.com/add-svg-to-web-page/

带背景重复的 SVG

看到这个：-为什么 background-repeat: no-repeat 不适用于 Opera 12 中的 .svg 图像？

会是这样
{background:url('image.svg ') repeat-x;}