SVG图像标签尺寸
问题描述：
<!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>
图像标签内，它是一个必须陈述宽度= “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>
感谢
答
你要明白，在宽度和高度的图像可视区域的范围，而不是图像的“大小”。换言之，这些值是图像应该占据的最大区域。如果光栅（位图）图像小于或大于该区域，则缩放和定位由preserveAspectRatio属性控制。如果你没有设置宽度和高度，他们默认为0，这就是为什么你没有看到任何东西。该规范说：
'图像'元素建立一个新的视口，参考文件 ，如建立一个新的视口中所述。新的 视口的边界由属性'x'，'y'，'宽度'和'高度'定义。参考图像的放置和缩放由 'imageAspectRatio'属性控制。
所以，你要寻找的解决方案是将宽度/高度设置为你希望的形象来填充，然后设置preserveAspectRatio为适当的值设置比例和位置，你想要的方式（最大面积该规范提供了一个示例SVG，其中显示了preserveAspectRatio的一些可能行为）。
你的问题措辞不当。例如，图像原始大小是什么，为什么你不使用它（你甚至知道它）？你在寻找一个相对大小还是绝对值？你想达到什么目的？你看过规范还是尝试没有属性？ – SpliFF 2012-02-23 04:18:44
原始大小意味着该文件的图像尺寸 – hkguile 2012-02-23 04:24:56
仍不清楚。你为什么没有改变width =“87”到width =“120”？你是否试图说有一系列不同尺寸的不同图像，你事先不知道？ – SpliFF 2012-02-23 04:30:10