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：

缩小到特定宽度（维持比率方面）
裁剪位图的底部

我尝试在封装位图图像的子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>

小提琴here

在SVG中裁剪和缩放图像

1 个答案: