在 SVG 中裁剪和缩放图像答案

【问题标题】：Crop and scale an image in SVG在 SVG 中裁剪和缩放图像
【发布时间】：2014-07-28 08:22:51
【问题描述】：

我的 HTML 中有一个 SVG 元素，其中包括两个外部文件，另一个 SVG 和一个位图。

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

我的目标是我可以将位图换成另一个（任何大小）并拥有位图：

缩小到特定宽度（保持比例纵横比）
裁剪掉位图的底部

我尝试在封装位图图像的子 SVG 元素上使用 clipPath、viewBox，但我无法解决问题。我正在尝试在没有 JavaScript 的情况下执行此操作（如果我能提供帮助的话）。

有什么想法吗？

【问题讨论】：

标签： css svg

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

小提琴here

【讨论】：

你拯救了我的一天，先生！