问题
I am making a gradient generator that creates gradients in the SVG format so users can open them in Adobe Illustrator, their browser, etc. Here is an example conical gradient that I have generated:
Here is the code for this one (it's very long) https://codepen.io/HexylCinnamal/pen/QWwPWBy
As you can see, there are minuscule little white lines between each wedge. The whole entire basis of this conical gradient is to create a pie chart that contains up to 360 elements. Due to the nature of the program that I am writing, I cannot use CSS or JS. I am not sure what I should do to remove these tiny little white lines, and if there is anything I can do. I have been searching on the web, but it is difficult to find anything pertaining to this topic as it is quite bizarre. I noticed that if I use a small number of wedges, such as 15, these lines do not appear. Here is an example: https://codepen.io/HexylCinnamal/pen/oNgONPM
<?xml version="1.0" encoding="UTF-8"?>
<svg height="100%" viewBox="0 0 20 20" width="100%" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(3.0000000000, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="0" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(15.8571428571, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="4.186667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(28.7142857142, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="6.280000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(41.5714285713, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="8.373333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(54.4285714284, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="10.466667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(67.2857142855, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="12.560000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(80.1428571426, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="14.653333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(92.9999999997, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="16.746667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(105.8571428568, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="18.840000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(118.7142857139, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="20.933333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(131.5714285710, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="23.026667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(144.4285714281, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="25.120000" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(157.2857142852, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="27.213333" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(170.1428571423, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="29.306667" stroke-width="10"/>
<circle cx="10" cy="10" fill="transparent" r="5" stroke="hsl(182.9999999994, 58.0000000000%, 49.0000000000%)" stroke-dasharray="2.093333 31.4" stroke-dashoffset="31.400000" stroke-width="10"/>
</svg>
I was wondering if there is a problem with the method I'm using with the approximations or if there's any hidden tricks to smooth things out. Thank you for reading.
来源：https://stackoverflow.com/questions/59925420/how-do-i-prevent-the-tiny-white-lines-between-svg-elements