Question

我想创建一个SVG圆环形状（圆圈内有另一个空圆圈）。我希望能够访问＆amp;调整两个圆圈的大小，例如通过他们的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修改圈子的大小。＆＃34; R＆＃34; （还）是一个可以用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;
}

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

2 个答案: