Question

我在带有viewBox的svg中有图像，是否可以使图像忽略由viewBox引起的缩放并始终将尺寸图像保持为50x50？

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <image xlink:href="someimage.png" width="50" height="50"></image>
</svg>

这是小提琴：http://jsfiddle.net/3LpxV/1/

Answer 1

嵌套的svg元素怎么样？

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <image xlink:href="someimage.png" width="50" height="50"></image>
    <svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
        <!--other elements-->
    </svg>
</svg>

Answer 2

您可以通过svg元素的css background-image属性显示图像，而不是使用图像元素此图像不受svg元素的viewBox的影响。

    svg{
        background-image:url("***.jpg");
        background-repeat:no-repeat;
        background-size:50px 50px;
    }

使SVG图像忽略父视图框

2 个答案: