Question

裁剪大图片作为css背景图片精灵，对于HTML img元素，这是有效的： img.src是一个svg定义的透明size100x100 pic只是为了保持它的高度和宽度，然后在样式背景中是真实的图片，来自大型复合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 background属性。如果您希望图像在SVG中显示，那么您必须将其自己明确地作为另一个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>

svg图像中的背景图像精灵？ [如何仅显示大图像的小裁剪部分]

1 个答案: