我正在尝试建立一个非常简单的甜甜圈图表。
下面是工作代码:
const countries = [
{'percent': 2,colour: 'red'},
{'percent': 28,colour: 'blue'},
{'percent': 36,colour: 'yellow'},
{'percent': 34,colour: 'orange'}
];
const donutData = countries.map((country, index) => {
return {
stroke: country.colour,
dashoffset: 25 - countries.slice(0, index).reduce((a, b) => a + b.percent, 0),
dashArray: [country.percent, 100 - country.percent]
}
});
const div = document.createElement('div');
div.innerHTML = '<svg id="donut" width="100%" height="100%" viewBox="3 3 36 36"></svg>';
document.body.appendChild(div);
document.querySelector('#donut').innerHTML= donutData.reduce((a, item) => {
return a +
`<circle
cx="21"
cy="21"
fill="transparent"
r="15.91549430918954"
stroke-width="2.3"
stroke="${item.stroke}"
stroke-dasharray="${item.dashArray[0]} ${item.dashArray[1]}"
stroke-dashoffset="${item.dashoffset}"></circle>
`;
}, '')
https://jsfiddle.net/miladhi/1dxnkjht/1/
上面的效果很好,但是尝试将stroke-linecap="round"
添加到<circle>
中,它会变得粗糙,笔画在彼此的顶部。
正如你在这里看到的,https://jsfiddle.net/miladhi/x8w4kgdv/。
我可以理解这个问题,但不知道如何在笔画之间增加一点边距,以避免丑陋的堆叠。
我很感谢你的建议。
发布于 2019-05-31 06:50:19
这就是如何使用路径和标记来完成此操作。诀窍是使用标记开始/标记结束组合。上一行看似重叠的部分实际上作为标记开始粘贴到当前行上。
<svg width="600px" height="400px">
<defs>
<marker id="round-cap-blue" viewBox="0 0 1 1"
markerWidth="1" markerHeight="1"
orient="auto" refX="0.5" refY="0.5">
<circle cx="0.5" cy="0.5" r="0.5" fill="blue"/>
</marker>
<marker id="round-cap-red" viewBox="0 0 1 1"
markerWidth="1" markerHeight="1"
orient="auto" refX="0.5" refY="0.5">
<circle cx="0.5" cy="0.5" r="0.5" fill="red"/>
</marker>
<marker id="round-cap-green" viewBox="0 0 1 1"
markerWidth="1" markerHeight="1"
orient="auto" refX="0.5" refY="0.5">
<circle cx="0.5" cy="0.5" r="0.5" fill="green"/>
</marker>
</defs>
<g transform="translate(100,0)">
<path fill="none" stroke="blue" stroke-width="30" d="M 150 150
A 100 100 0 0 0 50 50" marker-end="url(#round-cap-blue)"/>
<path fill="none" stroke="red" stroke-width="30" d="M 50 250
A 100 100 0 0 0 150 150" marker-end="url(#round-cap-red)"/>
<path fill="none" stroke="green" stroke-width="30" d="M 50 50
A 100 100 0 0 0 50 250" marker-start="url(#round-cap-blue)" marker-end="url(#round-cap-green)"/>
</g>
</svg>
https://stackoverflow.com/questions/56335682
复制相似问题