在 SVG 中剪切图像答案

【问题标题】：Clipping image within SVG在 SVG 中剪切图像
【发布时间】：2021-03-24 00:34:29
【问题描述】：

我正在制作一个 3D 按钮，它有一个显示图片的切口。背景图片不知何故比实际的圆圈小得多。

以下是有问题的行（下面是 CodePen 链接）：

    <g>
        <defs>
            <pattern id="image" patternUnits="objectBoundingBox" height="78" width="78">
                <image
                    xlink:href="https://vignette.wikia.nocookie.net/mighty355/images/b/b1/025Pikachu_XY_anime_3.png/">
                </image>
            </pattern>
        </defs>
        <circle cx="133.6" cy="133.7" r="78.7" fill="url(#image)" />
    </g>

整个文件是这样的： https://codepen.io/lemmerelassal/pen/GRjrNwe

感谢任何帮助。

【问题讨论】：

标签： html css image svg

【解决方案1】：

    <g>
        <image xlink:href="https://vignette.wikia.nocookie.net/mighty355/images/b/b1/025Pikachu_XY_anime_3.png/"
            style="clip-path: circle(30% at 50% 50%); width: 267px; height: 267px ;">
        </image>
    </g>

作品

【讨论】：