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对象。

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

Answer 2

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

他们是：

1）对象标记

3）iframe

4）嵌入式SVG

5）IMG标签

6） CSS

查看此内容：https://www.sitepoint.com/add-svg-to-web-page/

具有背景重复功能的SVG

看到以下内容：-{Why background-repeat: no-repeat doesn't work with .svg images in Opera 12?

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

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

2 个答案: