Question

我只是第一次修补SVG，所以我对这些功能知之甚少。

我创建了一个简单的圆环图 - 就是这样：

.chart-wrapper {
    max-width: 20rem;
}

<div class="chart-wrapper">

<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
    <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='#666ad1' stroke-width='4'></circle><circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#303f9f' stroke-width='4' stroke-dasharray='75 25' stroke-dashoffset='25''></circle>
</svg>

</div>

正如您将看到的，外环目前与内圈重叠，但我想要的是它完全位于内圈之外。

但是，我不确定这是通过笔画属性，剪辑属性还是简单地减小内圈的半径来完成的。

无论可用的解决方案是什么，都需要跨浏览器兼容，并且对于大约IE11以上的浏览器而言相当强大。

Answer 1

不幸的是，由于SVG规范不允许特定放置笔划，因此必须使用蒙版进行模拟。我将第一个环扩展了几个像素并添加了一个笔划（蒙版的笔划部分允许另一个圆圈出现。在IE 11中工作。

.chart-wrapper {
    max-width: 20rem;
}

<div class="chart-wrapper">

    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
        <defs>
            <mask id="cut-off-ring">
                <circle class='donut-ring' fill="transparent" stroke='white' cx='21' cy='21' r='17.91549430918954' stroke-width='4'></circle>
            </mask>
        </defs>
        <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' stroke='#303f9f' fill="transparent" stroke-width='4' stroke-dasharray='75 25' stroke-dashoffset='25'' mask="url(#cut-off-ring)"></circle>
    </svg>

</div>

Answer 2

以相反的顺序绘制圆圈，使内圆绘制在外圆的顶部。

请注意，fill =“none”可能比fill =“transparent”

更快

.chart-wrapper {
    max-width: 20rem;
}

<div class="chart-wrapper">

<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
    <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='none' stroke='#303f9f' stroke-width='4' stroke-dasharray='75 25' stroke-dashoffset='25''></circle>
    <circle class='donut-ring' cx='21' cy='21' r='14.5' fill='#666ad1'></circle>
</svg>

</div>

Answer 3

最终答案证明是一个简单的答案。

首先，我将填充颜色设置为透明。

然后我创建了第二个较小的圆圈，坐在中心，没有遮住外圈。

剪辑SVG的笔画

3 个答案: