javascript - SVG donut 形状，可访问两个圆圈

Question

我想创建一个 SVG donut 形状(内部有另一个空圆圈的圆圈)。我希望能够访问和调整两个圆圈的大小，例如通过它们的 id 属性。这将允许动画。

我考虑过三种方法，但没有一个那么好:

• 复杂路径:不允许通过#id访问内圈
• 轮廓笔划:可能，但对我的目的来说很复杂(当我增加笔划时必须重新定位)
• clippath/mask:不像复合路径那样工作，只是一个外框

有办法做到这一点吗？

Answer 1

可能最简单的方法是使用面具。

如果您正在使用一组离散的 donut 尺寸，则可以为每个尺寸使用 CSS 和 mask :

<svg width="500" height="500">
    <defs>
        <mask id="bigmask">
            <rect width="100%" height="100%" fill="white"/>
            <circle cx="250" cy="250" r="50"/>
        </mask>
        <mask id="smallmask">
            <circle cx="250" cy="250" r="150" fill="white"/>
            <circle cx="250" cy="250" r="100"/>
        </mask>
    </defs>
    <circle id="donut" cx="250" cy="250" r="200" mask="url(#bigmask)"/>
</svg>

CSS:

#donut:hover
{
    mask: url(#smallmask);
}

Demo here

遗憾的是，您无法使用 CSS 修改圆圈的大小。 “r”(还)不是可以用 CSS 操作的属性。因此，您需要使用 SMIL (SVG) 动画，或使用 javascript 操作 mask 圆:

<svg width="500" height="500">
    <defs>
        <mask id="donutmask">
            <circle id="outer" cx="250" cy="250" r="200" fill="white"/>
            <circle id="inner" cx="250" cy="250" r="50"/>
        </mask>
    </defs>
    <circle id="donut" cx="250" cy="250" r="200" mask="url(#donutmask)"/>
</svg>

JS

$("#donut").mouseenter(function(evt) {
    $("#outer").attr("r", 100 + Math.random() * 100);
    $("#inner").attr("r", 100 - Math.random() * 50);
});

Demo here