SVG Circle：圆形裁剪图像

Question

我想创建一个简单的UI，其中用户将鼠标悬停在SVG圆上，并且圆变大（增加半径）。在每个圆圈内，我要有一个图像/图标。到目前为止，我尝试过的最好方法是将其分层。首先添加图片，然后在fill：'none'的上方圈出。对于非svg的div情况，它要简单一些，因为我们可以设置div的样式以裁剪图片，如下所示：

<div class="cropper">
    <img class="picture" src="https:a picturejpg">
</div>

CSS

.cropper {
    width: 100px;
    height: 100px;
    position: relative;
    border: 2px solid white;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    overflow:hidden;
}
.picture {
    display: block;
    margin: 0 auto;
    height: auto;
    width: 100%;
}

问题：如何针对SVG案例调整类似的圆形作物实施方式？这是说明我的问题的粗略视觉参考：

• 重要注意事项：目前，我只是试图做一个svg圆形裁剪作为概念证明，但是很快我将需要通过d3.js或jquery以编程方式附加它们。程序上可靠的答案是首选。

Answer 1

也许您可以使用clip-path来引用内嵌svg <clipPath>。。类似这样的东西...

img {
  width: 300px;
  clip-path: url(#clipping);
}

<img src="https://i.imgur.com/pqggrK0.jpg" />
<svg>
  <clipPath id="clipping">
    <circle cx="150" cy="150" r="50" />
    <rect x="150" y="150" width="100" height="100" />
  </clipPath>
</svg>

更多有关剪辑路径的信息：https://css-tricks.com/clipping-masking-css/