可以访问两个圆圈的 SVG 甜甜圈形状

Question

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

我已经考虑了三种方法，但没有一个是那么好：

• 复杂路径：不允许通过#id 访问内圈
• 轮廓描边：可能但对我的目的来说很复杂（当我增加描边时必须重新定位）
• clippath/mask：不像复合路径，只有一个外框

有没有办法做到这一点？

Answer 1

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

如果您使用一组离散的甜甜圈尺寸，您可以使用 CSS 和每个尺寸的掩码：

<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 操作您的蒙版圆圈：

<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

Answer 2

虽然 BigBadaboom 的答案是 IMO 的最佳方式，但如果您想使用复合路径，可以通过重写路径的 d 属性来制作动画，如下所示：

// get svg path coordinates for a ring
ring:function(x, y, ir, or) {
    var path  =
          'M'+x+' '+(y+or)+'A'+or+' '+or+' 0 1 1 '+(x+0.001)+' '+(y+or) // outer
        + 'M'+x+' '+(y+ir)+'A'+ir+' '+ir+' 0 1 0 '+(x-0.001)+' '+(y+ir) // inner
        ;
    return path;
}