SVG中的图像元素不占据整个矩形 - jquery答案

【问题标题】：Image element not occupying the full rectangle in SVG - jquerySVG中的图像元素不占据整个矩形 - jquery
【发布时间】：2013-03-08 17:19:41
【问题描述】：

请参考下面的 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>

输出如下所示。

如何让图片占据整个矩形？

谢谢，

湿婆

【问题讨论】：

你确定，你的“全矩形”是矩形元素吗？也许图像只是不占用您的 svg-tag 中指定的尺寸（5cm x 4cm）。
我想让图像完全占据矩形空间。我已经检查了你的 js fiddle 它在左侧角和右侧角似乎是同样的问题。如果图像完全被矩形占据，则表示矩形的内部颜色对我们来说是不可见的。但现在它在左侧和右侧都可以看到。

标签： jquery svg jquery-svg

【解决方案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>

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

assign height="150px" 和 width="150px"（就像你已经做过的那样）
分配 preserveAspectRatio="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>

preserveAspectRatio 是一个在使用 SVG 时绝对应该由内而外了解的属性，所以我建议阅读一些文档并尝试一下。很好的解释可以在

找到

https://developer.mozilla.org/en-US/docs/SVG/Attribute/preserveAspectRatio

【讨论】：

【解决方案2】：

它在my 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>

【讨论】：

我想让图像完全占据矩形空间。我已经检查了你的 js fiddle 它在左侧角和右侧角似乎是同样的问题。如果图像完全被矩形占据，则表示矩形的内部颜色对我们来说是不可见的。但现在它在左侧和右侧都可以看到。