在圆形svg内显示图像答案

【问题标题】：Displaying an image within a circle svg在圆形svg内显示图像
【发布时间】：2020-06-05 01:40:45
【问题描述】：

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

<!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>

【问题讨论】：

相当肯定 fill="#image-JON" 应该是 fill="url(#image-JON)" 虽然 - stackoverflow.com/questions/29442833/svg-image-inside-circle
是的，你是对的，但我的问题仍然存在。我已经编辑了我的原始问题，因为我认为它可以简化为一个更简单的问题。

标签： html css svg dom

【解决方案1】：

已解决，需要ID的是pattern标签，不是图片标签：

<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>

【讨论】：