在SVG中裁剪和缩放图像

Question

我的HTML中有一个SVG元素,它包含两个外部文件,另一个SVG和一个Bitmap.

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="1024" height="768">
        <image xlink:href="bitmap.png" />
        <image xlink:href="outline.svg" />
</svg>

我的目标是我可以将Bitmap换成另一个(任何大小)并使用Bitmap:

1. 缩小到特定宽度(保持比率方面)
2. 裁剪位图的底部部分

我已经尝试在封装位图图像的子SVG元素上使用clipPath,viewBox,我无法解决问题.我试图在没有JavaScript的情况下这样做(如果我可以帮助的话).

有什么想法吗？

Answer 1

使用preserveAspectRatio属性:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="45">

    <image id="img" x="0" y="0"
        width="100%" height="100%"
        xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
        preserveAspectRatio="xMinYMin slice"/>
</svg>

在这里小提琴