<!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"？我想让图像显示其原始大小(例如原始大小是宽度="180"高度="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,这就是您没有看到任何内容的原因.规范说:
"image"元素为引用的文件建立新视口,如"建立新视口"中所述.新视口的边界由属性"x","y","width"和"height"定义.参考图像的放置和缩放由'image'元素上的'preserveAspectRatio'属性控制.
所以,你要寻找的解决方案是将宽度/高度设置为你希望的形象来填充,然后设置preserveAspectRatio为适当的值设置比例和位置,你想要的方式最大面积(规范提供了一个例子SVG显示preserveAspectRatio的一些可能行为.
| 归档时间： |
|
| 查看次数： |
8905 次 |
| 最近记录： |