我的最终目标是将 svg 图像用于 css 背景,如下所示:
#somelement {
background: transparent url(#embededSvg) repeat-x;
}
我需要(想要*)两件事才能工作, 1. svg 嵌入到文档中(但不是像块一样呈现)女巫,我可以使用:
Skip<svg ... style="display:none;">...</svg>
- 在其 x 轴上循环的 svg 作为 css 背景(无需将无关的文件与 hta/htm 文档打包)。
我尝试将 svg 创建为 Javascript Image 对象并将对象 innerHtml 设置为 svg,但我不确定如何在 css 中引用 Image 对象。
您的想法是正确的,您将链接 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
SVG 可以通过 6 种方式
添加到页面中它们是:
1) 对象标签
3) 内嵌框架
4) 内联 SVG
5) IMG标签
6) 铯
看到这个: https://www.sitepoint.com/add-svg-to-web-page/
具有背景重复
的 SVG看到这个:-为什么背景重复:无重复不适用于 Opera 12 中的.svg图像?
会是这样的
{background:url('image.svg ') repeat-x;}