在圆形svg中显示图像

问题描述 投票:1回答:1

我已经编辑了这个问题,因为我的上一个问题实际上可能会简化为这个问题。...为什么当我期望看到一个充满图像的圆圈时,为什么在这里什么也看不到:

<!DOCTYPE html>
<meta charset="utf-8">
<body>

    <svg width="100" height="100">
        <defs>
            <pattern patternUnits="userSpaceOnUse" height="100" width="100">
                <image id="image-JON" x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
                </image>
            </pattern>
        </defs>
        <circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">

        </circle>
    </svg>

</body>
html css svg dom
1个回答
0
投票

已解决,它是需要ID的图案标签,而不是图像标签:

<svg width="100" height="100">
        <defs>
            <pattern id="image-JON" patternUnits="userSpaceOnUse" height="100" width="100">
                <image x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
                </image>
            </pattern>
        </defs>
        <circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">

        </circle>
</svg>
© www.soinside.com 2019 - 2024. All rights reserved.