<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="test1"
height="1000px"
width="1000px">
<image id="testimg1" xlink:href="http://localhost/at/src/html5test/map1.png" width="87" height="66" x="0" y="0"/>
</svg>
</p>
</body>
</html>
在图像标签中，是否必须声明 width="87"height="66"？我想让图片显示原来的尺寸(比如原来的尺寸是width="180"height="120")，可以吗？
在这种情况下，如果我删除 width="87"height="66"，整个 svg 将不显示任何内容。
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="test1"
height="1000px"
width="1000px">
<image id="testimg1" xlink:href="http://localhost/at/src/html5test/1.svg" x="0" y="0" />
<image id="testimg2" xlink:href="http://localhost/at/src/html5test/2.svg" x="19" y="127" />
<image id="testimg3" xlink:href="http://localhost/at/src/html5test/3.svg" x="130" y="110" />
</svg>
谢谢
最佳答案
您需要了解，宽度和高度是图像视口(viewport)的边界，而不是图像的“大小”。换句话说，这些值是图像应该占据的最大区域。如果光栅(位图)图像小于或大于该区域，则缩放和定位由 preserveAspectRatio 控制。属性。如果您不设置宽度和高度，它们默认为 0，这就是您什么都看不到的原因。规范说:
An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’. The placement and scaling of the referenced image are controlled by the ‘preserveAspectRatio’ attribute on the ‘image’ element.
所以您正在寻找的解决方案是将宽度/高度设置为您希望图像填充的最大区域，然后将 preserveAspectRatio 设置为适当的值以设置比例并按照您想要的方式定位(规范提供一个 SVG 示例，显示了 preserveAspectRatio 的一些可能行为)。
关于html - svg 图像标签大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9407069/