Question

<!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>

感谢

Answer 1

您需要了解宽度和高度是图像视口的边界，而不是图像的“大小”。换句话说，这些值是图像应占据的最大区域。如果光栅（位图）图像比该区域更小或更大，则缩放和定位由preserveAspectRatio属性控制。如果您没有设置宽度和高度，则默认为0，这就是您没有看到任何内容的原因。规范说：

'image'元素为引用的文件建立新的视口如建立新视口中所述。新的界限视口由属性'x'，'y'，'width'和'height'定义。该参考图像的放置和缩放由

因此，您正在寻找的解决方案是将宽度/高度设置为您希望图像填充的最大区域，然后将preserveAspectRatio设置为适当的值，以便按照您想要的方式设置比例和位置（规范提供示例SVG显示了preserveAspectRatio的一些可能行为。

svg图片标签大小

1 个答案: