用背景图像填充SVG路径元素


166

是否可以background-image为SVG <path>元素设置a ?

例如,如果我设置了element class="wall",则CSS样式.wall {fill: red;}有效,但.wall{background-image: url(wall.jpg)}都不起作用.wall {background-color: red;}


1
显示如何设置SVG文本的背景图像(可选地,每个字符为基础):stackoverflow.com/a/10853878/405017
Phrogz

对于那些寻求更多深入信息的人,请查看此文章链接
Paulo Bueno

Answers:


261

您可以通过将背景变成图案来实现

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

根据您的图像调整宽度和高度,然后从这样的路径中引用它:

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

工作实例


3
非常好,这也适用于base64图像吗?而不是wall.jpg,data:image/png;base64,iVBORw0KGgoAA就像您在普通CSS中那样?
Christoph

12
@Christoph我不知道,试试看。
罗伯茨2012年

2
@robertc我尝试过,但没有用,但是我有一个重复的样式元素。通过消除它,它工作得很好;)
Christoph

4
@robertc:关于您的回答,我有一个问题。模式从全局坐标(0,0)开始。是否可以让图案使用附着对象的局部坐标系?我想在我的svg中的不同位置绘制一个rect,结果是,图案在孔背景中重复出现,并且将对象用作蒙版。
Tobias Golbs 2012年

6
@robertc,请更新您的答案以提及xlink:href自SVG 2起已弃用的内容,请立即使用hrefdeveloper.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
Blake Regalia
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.