3

我试图弄清楚如何获取一个复杂的 SVG 文件并轻松地将其调整为任何 id 之类的东西。假设我想要一个 100x100 的 SVG 图像为 5x30，我希望它可以调整大小而不进行任何裁剪。

我想仅使用 SVG 文档或将其嵌入到另一个 SVG 文件中来执行此操作。我在实现这一目标时遇到了很多麻烦。

例如：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" version="1.0">
  <image x="0" y="0" width="516.3034" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" xlink:type="simple" xlink:actuate="onLoad" height="777.2853" preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
</svg>

这只是在我希望完成的是嵌入图像被缩小以适合视图框时裁剪图像。

4

1 回答 1

4

使用图像元素的百分比：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet">
</svg>

或者使用 viewBox 坐标系：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100" height="100" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet" />
</svg>

如果 viewBox 纵横比与视口不匹配，这两种方式可能会略有不同，因为百分比是基于视口大小的。如果您不关心图像纵横比，您可以使用preserveAspectRatio="none".

于 2013-08-30T09:00:21.113 回答