剪辑 SVG 的笔画答案

【问题标题】：Clip the stroke of an SVG剪辑 SVG 的笔画
【发布时间】：2018-03-30 02:55:28
【问题描述】：

我只是第一次修改 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>

如您所见，目前外圈与内圈重叠，但我想要的是它完全位于内圈之外。

但是，我不确定这是通过 stroke 属性、clip 属性还是简单地减小内圆的半径。

任何可用的解决方案都需要跨浏览器兼容，并且对于大约 IE11 以后的浏览器来说相当健壮。

【问题讨论】：

标签： svg

【解决方案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>

【讨论】：

相反的效果 Jim - 外圈应该完全位于内圈之外，而不是完全在内圈内。
修改为使用掩码。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

然后我创建了第二个较小的圆圈，位于中心，不会遮挡外环。

【讨论】：

你应该使用 none 而不是 transparent。