带有奇怪边缘的 SVG 图标渲染答案

【问题标题】：SVG icon rendering with weird edges带有奇怪边缘的 SVG 图标渲染
【发布时间】：2017-05-21 12:58:24
【问题描述】：

chrome 上的 SVG 图标看起来很奇怪，尤其是 instagram 图标 - 在缩放时您可以看到所有奇怪的边缘。有谁知道如何解决它？

这是图标的代码：

    <div id="instagram">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" class="icon">
<path fill="black" class="social_instagram" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
<path class="circle" fill="white" d="M12,8.4c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6s3.6-1.6,3.6-3.6S14,8.4,12,8.4z M12,14.3c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3s2.3,1,2.3,2.3S13.3,14.3,12,14.3z M15.7,9.1c-0.5,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8C16.6,8.7,16.2,9.1,15.7,9.1z M19,9.1c-0.1-2.5-1.5-4-4.1-4.1c-0.7,0-1,0-2.9,0S9.9,5,9.1,5C6.6,5.2,5.2,6.6,5,9.1c0,0.7,0,1,0,2.9s0,2.1,0,2.9c0.1,2.5,1.5,4,4.1,4.1c0.7,0,1,0,2.9,0s2.1,0,2.9,0c2.5-0.1,4-1.5,4.1-4.1c0-0.7,0-1,0-2.9S19,9.9,19,9.1z M17.7,14.8c-0.1,1.9-1,2.8-2.9,2.9c-0.7,0-1,0-2.8,0c-1.9,0-2.1,0-2.8,0c-1.9-0.1-2.8-1-2.9-2.9c0-0.7,0-1,0-2.8s0-2.1,0-2.8c0.1-1.9,1-2.8,2.9-2.9c0.7,0,1,0,2.8,0s2.1,0,2.8,0c1.9,0.1,2.8,1,2.9,2.9c0,0.7,0,1,0,2.8S17.7,14.1,17.7,14.8z"/>
</svg>
</div>

【问题讨论】：

不清楚你所说的“奇怪的边缘”是什么意思。请解释。你说的是图标的哪一部分？

标签： css reactjs svg

【解决方案1】：

看起来你的圆实际上只是一个正方形，带有一些弯曲角的向量。这可能就是为什么 Chrome 渲染它的方式与您想要的不同。不要使用path 来绘制圆圈，而是使用circle。

<circle cx="12" cy="12" r="12" fill="black" class="social_instagram"/>

【讨论】：