SVG 图像元素调整图片大小

Question

所以我忙于 SVG，我的项目中需要几张图片。所以你有元素。您还可以给出高度和宽度。给定的图片不会调整为您为图像元素指定的高度和宽度。

我有这个代码：

<g class="node image" transform="translate(0,129.652067739873)" type="ad">
    <image href="content/image/image.png" height="30px" width="100px" y="41.94444444444444" x="0">
        <title>google.nl</title>
    </image>
    <text y="56.625" x="106" dy=".35em" text-anchor="start">google.nl</text>
</g>

现在我希望 image.png 覆盖整个图像元素。像背景大小：封面；但这不起作用，我找不到任何可以做到这一点的属性。有没有办法以正确的方式做到这一点？

Answer 1

尝试为 <image> 元素设置 preserveAspectRatio="none"。此外，如果您希望它覆盖所有 svg，请将 width 和 height 设置为 '100%'

<image href="content/image/image.png" height="100%" width="100%" y="41.94444444444444" x="0" preserveAspectRatio="none">

SVG 图像元素调整图片大小

SVG Image element resize picture

svg

image