Question

我正在尝试使用svg在圆圈内渲染图像。这适用于chrome，但不适用于其他浏览器，我做错了什么？

我已经提供了几种指定图像链接的方法，href =是适用于chrome的。我不能让其中任何一个在其他地方工作。如果我将填充更改为＃000，则填充黑色 - 因此问题出在模式中。

<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125"
            width="206.440673828125">
            <image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
                xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
                xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image>
        </pattern>
    </defs>
    <circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle>
</svg>

Answer 1

您需要指定图像的高度和宽度。

带有图案图像的SVG Circle仅在chrome上呈现，为什么不是firefox和edge？

1 个答案: