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

Question

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

我考虑了三种方法，但都不是很好:

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

有没有办法做到这一点？

Answer 1

可能最简单的方法是戴口罩。

如果您正在处理一组离散的 donut 尺寸，您可以为每个尺寸使用 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