图像元素未在SVG中占据整个矩形-jQuery

Question

请参考下面的SVG。

<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">

<rect x="0" y="0" width="150px" height="150px"/>

    <image xlink:href="firefox.jpg" x="0" y="0" height="150px" width="150px"/>
</svg>

输出如下所示。

如何使图像占据整个矩形？

谢谢，

西瓦

Answer 1

适用于与您的矩形具有相同长宽比的图像： http : //jsfiddle.net/M24gX/

<svg width="8cm" height="8cm" version="1.1">
    <rect x="0" y="0" width="150px" height="150px" fill="red"/>
    <image xlink:href="http://lorempixel.com/150/150/sports/"
        x="0" y="0" height="150px" width="150px"/>
</svg>

对于具有不同纵横比的图像不起作用： http : //jsfiddle.net/5v9bd/

<svg width="8cm" height="8cm" version="1.1">
    <rect x="0" y="0" width="150px" height="150px" fill="red"/>
    <image xlink:href="http://lorempixel.com/300/150/sports/"
        x="0" y="0" height="150px" width="150px"/>
</svg>

如果您希望图像填充矩形的整个150x150px，而不考虑其纵横比，则：

• 分配height =“ 150px”和width =“ 150px”（就像您已经做过的那样）
• 分配reserveAspectRatio =“ none”以允许图像具有不均匀的缩放比例

示例： http ： //jsfiddle.net/Fq96J/

<svg width="8cm" height="8cm" version="1.1">
    <rect x="0" y="0" width="150px" height="150px" fill="red"/>
    <image xlink:href="http://lorempixel.com/300/150/sports/"
        x="0" y="0" height="150px" width="150px" preserveAspectRatio="none"/>
</svg>

prepareAspectRatio是使用SVG时应该完全了解的属性，因此我建议阅读一些文档并进行一些尝试。 可以在以下位置找到很好的解释

• https://developer.mozilla.org/zh-CN/docs/SVG/Attribute/preserveAspectRatio

Answer 2

它在我的JSFiddle上运行良好。 您可以在JSFiddle上重现它吗？

<svg width="8cm" height="8cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">

<rect x="0" y="0" width="150px" height="150px" stroke="red" stroke-width="3"/>

    <image xlink:href="firefox.jpg" x="0" y="0" height="150px" width="150px"/>
</svg>