请引用下面的 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>
输出如下所示。
如何使图像占据整个矩形?
谢谢
湿婆
最佳答案
适用于与矩形具有相同纵横比的图像: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 像素的矩形,无论其纵横比如何,您:
- 指定 height="150px"和 width="150px"(就像您已经做的那样)
- 指定preserveAspectRatio="none"以允许图像具有非均匀缩放
<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 时您绝对应该了解的属性,因此我建议您阅读一些文档并尝试一下它。很好的解释可以在
找到关于jquery - SVG 中的图像元素不占据整个矩形 - jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15266882/