使用背景图片填充SVG路径元素

Question

能否为SVG <path> 元素设置 background-image 背景图片呢？

例如，如果我给元素设置了 class="wall"，CSS样式 .wall {fill: red;} 可以生效，但是 .wall{background-image: url(wall.jpg)} 和 .wall {background-color: red;} 都不能生效。

- jbochi

---

展示如何为SVG文本设置背景图像，可选择按字符设置：https://dev59.com/xmTWa4cB1Zd3GeqPDnzo#10853878 - Phrogz

对于那些寻找更深入信息的人，请查看这篇文章[链接]（http://vanseodesign.com/web-design/svg-pattern-attributes/）。 - Paulo Bueno

Answer 1

你可以通过将背景制作成图案来实现：

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image 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)" />

工作示例

- robertc

---

非常好，这对base64图片也适用吗？可以像在普通CSS中一样使用 data:image/png;base64,iVBORw0KGgoAA 代替 wall.jpg 吗？ - Christoph

@Christoph 我不知道，试试看吧。 - robertc

@robertc 我尝试了但没有成功，后来发现有一个重复的样式元素。删除它之后，一切都正常了;) - Christoph

@robertc：关于你的答案，我有一个问题。该图案从全局坐标（0,0）开始。是否可以让该图案使用所附对象的本地坐标系？ 我想在我的SVG文件中的不同位置绘制矩形，但问题是图案会在整个背景上重复出现，并且对象被用作遮罩。 - Tobias Golbs

@robertc 请更新你的答案，提到 xlink:href 自 SVG 2 起已被弃用，现在应该直接使用 href。https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/xlink:href - Blake Regalia