如何在SVG：image标签中指定要渲染的图像部分？ [英] How to specify the portion of the image to be rendered inside SVG:image tag?

问题描述

我有一个PNG文件，上面有很多图标。我想在我的SVG中使用它。我使用svg：image标签：

I have a PNG file with lots of icons on it. I want to use it in my SVG. I use the svg:image tag:

<image xlink:href="icons.png" height="50px" width="50px"></image>

这会渲染整个图像。如何指定要呈现的文件部分？ （我需要SVG相当于CSS的后台位置属性）

This renders the whole image. How can I specify the portion of the file to be rendered? (I need an SVG-equivalent of CSS's background-position attribute)

更新

我怀疑 preserveAspectRatio 属性是我需要的，但无法弄清楚如何使用< image> 。请参见此示例。

推荐答案

您可以使用preserveAspectRatio以有限的方式实现此影响。但是受限于preserveAspectRatio提供的定位选项。因此，只要您的精灵最多有3x3图像或位于角落或侧面，它就可以工作。

You can use preserveAspectRatio to achieve this affect in a limited way. But you are limited by the positioning options that preserveAspectRatio provides. So as long as your sprite has a maximum of 3x3 images or are positioned at the corners or sides, it would work.

这是我能想到的其他两种方式以更灵活的方式实现相同的效果。

The are a couple of other ways I can think of to achieve the same effect in a more flexible way.

• 使用剪辑或剪辑路径样式属性以及仔细定位图像在页面上


• 将图像嵌入另一个< svg> 元素中，并使用viewBox选择所需的精灵部分。

• Use the clip or clip-path style properties along with careful positioning of the image on the page
• Embed the image inside another <svg> element and use viewBox to select the part of the sprite you want.

以下示例演示了上述三种主要技巧。

The following example demonstrates the three main techniques above.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 400 400" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Testing image elements</desc>

  <!-- Outline the drawing area in blue -->
  <rect fill="none" stroke="blue" 
        x="1" y="1" width="398" height="398"/>

  <!-- Use preserveAspectRatio to show the top 64 pixels of the image (Stack Overflow logo) -->
  <image x="100px" y="100px" width="238px" height="64px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png"
         preserveAspectRatio="xMinYMin slice"/>

  <!-- Use a CSS clip rectangle to show a small facebook logo from the sprite.  Logo is at 150,1000 with dimensions 19x19.
       Positioned at 100,200 in the SVG (-50+150, -800+1000).  Could also use a clip-path for this. -->
  <image x="-50px" y="-800px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png"
         clip="rect(200 100 219 119)" />

  <!-- Use a svg viewBox to show the facebook logo from the sprite.
       By setting our viewBox to the bounds of the logo, the renderer will scale it to fit the specified width and height.
       Which in this case is 19x19 - the same size as the sprite. -->
  <svg x="100px" y="300px" width="19px" height="19px" viewBox="150 1000 19 19" version="1.1">
    <image x="0px" y="0px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" />
  </svg>

</svg>

这篇关于如何在SVG：image标签中指定要渲染的图像部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！