Reputation: 297
I can't understand why svg is drawn with a line between the edges of the arc in Chrome and Opera browsers. There is no line in firefox. The line is not visible all the time, but at certain sizes, for example 93px, 118px, 129px, etc. Any ideas how to fix it, need without a line. Thanks!
Without a line ,
With a line
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
height: 93px;
width: 93px;
resize: both;
overflow: hidden;
}
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="a" y1="50" x2="100" y2="50" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b79bc9" />
<stop offset="1" stop-color="#6e69b0" />
</linearGradient>
</defs>
<path d="M12.43 29.58a41 41 0 0 1 58 58M82.84 100A58.58 58.58 0 0 0 0 17.16m12.43 12.42L0 17.16M82.84 100 70.42 87.57" style="fill:url(#a)" />
</svg>
</div>
Upvotes: 0
Views: 72
Reputation: 297
Sorry friends it's my fault, i made a bad svg. Fix
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
height: 93px;
width: 93px;
resize: both;
overflow: hidden;
}
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 99.38">
<defs>
<linearGradient id="a" x1="-16.8" y1="50" x2="100.51" y2="50" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b79bc9" />
<stop offset="1" stop-color="#6e69b0" />
</linearGradient>
</defs>
<path d="M41.6.31A58.18 58.18 0 0 0 0 17.74l14.56 14.34a38 38 0 1 1 54.08 53.27L83.2 99.69A58.39 58.39 0 0 0 41.6.31Z" transform="translate(0 -.31)" style="fill:url(#a)" />
</svg>
</div>
Upvotes: 1