svg图片标签大小 [英] svg image tag size
问题描述
<!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 =87height =66？我想让图像显示其原始大小（例如原始大小是宽度=180高度=120），是否可以这样做？
within the image tag, is it a must to state the width="87" height="66"? i want to let the image to display its original size(e.g the original size is width="180" height="120"), is it to possible to do that ?
在这种情况下，如果我删除width =87height =66，则整个svg将不显示任何内容。
in this case, if i remove width="87" height="66", the whole svg will display nothing.
<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，这就是您没有看到任何内容的原因。规范说：
You need to understand that the width and height are the bounds of the image viewport, not the "size" of the image. Put another way those values are the MAXIMUM area that image should occupy. If a raster (bitmap) image turns out to be smaller or larger than that area then the scaling and positioning are controlled by the preserveAspectRatio attribute. If you don't set width and height they default to 0 which is why you aren't seeing anything. The spec says:
'image'元素为引用的文件
建立一个新的视口，如建立一个新的视口中所述。新
视口的边界由属性'x'，'y'，'width'和'height'定义。参考图像的
放置和缩放由'image'元素上的
'reserveAspectRatio'属性控制。
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的一些可能行为。
So the solution you're looking for is to set the width/height to the maximum area you expect an image to fill and then set preserveAspectRatio to the appropriate value to set the scale and position the way you want (the spec provides an example SVG showing some of the possible behaviours for preserveAspectRatio).
这篇关于svg图片标签大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
