SVG：如何拉伸图像

Question

我正在尝试使用SVG教程，我只是像这样加载了一张图片：

<?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 style="stroke-linejoin:round; stroke:black; stroke-width:0.5pt; text-anchor:middle; fill:none" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica, Arial, FreeSans, Sans, sans, sans-serif" height="400px" width="400px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250">
    <rect y="0" x="0" height="250" width="250" stroke="black"  stroke-width="1" fill="blue" />
    <image y="0" x="0" height="250" width="250" xlink:href="http://www.blueprintmodel.co.uk/images/DSCF1438.jpg" />
</svg>

即使宽度和高度相同，在viewBox中，我的图像仍然位于“rect”的中心位置。 我的问题是：

• 如何将图片拉伸到与矩形一样的大小？
• 为什么“image”标记中的“height”不能起作用？
• 是否有可以使用的“拉伸”或“调整大小”等变换？ （我找不到它们）

- Aleksandar

---

尝试在图像上使用 transform="scale(2)" 这样的转换属性。 - philipp

我已经尝试过那个方法，但我需要将其拉伸到250x250大小。虽然这种方法可能有效，但在这种情况下，我需要知道图片的格式，例如如果图片是4:2，则transform="scale(0.5)"可以解决问题。问题是我需要适用于任何图片的方法。 - Aleksandar

Answer 1

在SVG元素上设置preserveAspectRatio="none"：

<svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" >

- Robert Longson

---

请注意，这可能对某些（包括许多移动）浏览器无效。@Aleksandar - Aero Wang

请注意，除非存在viewBox来定义图像的纵横比，否则preserveAspectRatio无效。 - Corentin Le Fur

preserveAspectRatio也可以应用为<image>元素的属性，而不是全局应用于<svg>。https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image - chris

Answer 2

使用纯CSS也可以缩放和更改SVG的宽高比：

transform: scale(x, y);

- miir

---

注意：我知道这个答案并没有直接回答原问题。我需要调整SVG的大小，同时忽略它的长宽比，这让我来到了这个问答页面，但是我发现在我的情况下使用CSS方法更为合适，所以我在这里分享给其他可能会觉得有用的人。 - miir

这对某些情况可能有效，但请记住，这可能会导致SVG与其他元素重叠，因为变换不会“推动”元素。 - idkwhatsgoingon

Answer 3

当使用SVG图像时，请了解如何使用preserveAspectRatio属性，借助它，您可以使SVG图像在任何方向上都具有响应性！

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

回答您的问题：

• 如何将图像拉伸到矩形大小？

  <image viewBox="0 0 250 250" preserveAspectRatio="none" … />

• 为什么“图像”标签中的“height”不能起作用？

  我不知道图像有什么问题，因为原始图像已经不存在了。无论如何，对于SVG，您应该专注于使用viewBox而不是width和height。你知道，名称包含可缩放的单词，并且使用宽度和高度会防止这种情况...

• 是否有“拉伸”或“调整大小”的转换可以使用？

  居中并包含：
  <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet" …

  居中并覆盖：
  <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice" …

PS. 如果您想了解有关缩放SVG图像中的陷阱的所有信息（但请忘记IE，并且不要使用padding-bottom hack）：https://css-tricks.com/scale-svg/

- peterhil