背景图像精灵在svg图像中？[如何只显示大图像的一小部分]

Question

裁剪一幅大图片作为css背景图像sprite，对于HTML元素来说，这是有效的: img.src是一个svg定义的透明size100x100图片，只为了保持其高度和宽度，然后在样式背景中是真正的图片，一个从大型复合png图片中指定的插槽：

<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.1%29%22%3E%3C/rect%3E%3C/svg%3E"
   class="rounded-circle"
   style="background: url('/path/to/large.png') -500px -2900px"
   alt="alt name">

它在正常的HTML文档中工作，

现在，我需要在一个大型SVG图中使用它，主要是因为在一个D3数据可视化项目中，svg是由d3生成的，我想插入组合png的不同精灵以显示在D3图表的不同位置，但是类似的语法不起作用：

<svg ...>
  <image href="the-transparent-foreground-png-or-svg"
     style="background: url(/path/to/large.png) -500px -2900px" />
</svg>

因为在svg标记中，它被称为<image>并使用href；但是背景样式似乎不适用

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

它并不是完全重复的，因为下面的答案也有clipPath，这是更好的答案。

Answer 1

SVG元素不支持HTML属性。如果您希望图像到ap( SVG中的pear)，那么必须将其显式地作为另一个svg元素放在那里。

<svg ...>
  <image href="/path/to/large.png" ... />
  <image href="the-transparent-foreground-png-or-svg"/>
</svg>

但由于第二个图像是透明的，它是没有意义的，可以删除。

如果您只想显示large.png的一部分，那么您将需要屏蔽或剪辑它，并小心地定位它。

您可能需要以下内容：

<svg ...>

  <defs>
    <clipPath id="square100">
      <rect width="100" height="100"/>
    </clipPath>
  </defs>

  <g clip-path="url(#square100)">
    <image href="/path/to/large.png" transform="translate(-500 -2900)" ... />
  </g>
</svg>