Chrome 中的 SVG 填充神器

Question

我有一个多边形路径，其中填充了一种颜色。 这在 Firefox 和 IE 中完美运行。

在 Chrome 中取决于大小 - 出现伪影。在此处的示例中，有一个对角渐变，而不是纯色。

问题，我该如何解决这个问题，或者有什么解决方法？

如果错误不可见，则必须更改宽度，因为它并不总是被触发。在 JSFiddle 中这很简单，预览容器的大小可以很容易地改变。

该错误仅在 shaperendering 未设置为 crispedges 时发生。

svg {  
    backface-visibility: hidden;
    width:50%;
}
.auto {
    fill: #37d0cd;
    shape-rendering: auto;
}
.crisp {
    fill:#37d0cd;
    shape-rendering: crispedges;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="auto">
    <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="crisp">
    <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

Link to JSFiddle

展示错误的 JsFiddle 屏幕截图：

Answer 1

所以我找到了一种解决方法 - 但感觉就像是 hack。因此，我对解决方案并不满意；希望有更好的办法。

基本上，填充颜色会获得形状渲染的crispedges - 这会创建像素化边框。 为了摆脱像素化的边框，我再次添加了相同的路径，给它一个透明填充和形状渲染自动。

svg {  
    backface-visibility: hidden;
    width:50%;
}
.auto {
    fill: #37d0cd;
    shape-rendering: auto;
}

.crisp .a {
   stroke: #37d0cd;
   fill: transparent;
   shape-rendering: auto;
}

.crisp .b {
   fill: #37d0cd;
   stroke:transparent;
   shape-rendering: crispedges;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="auto">
    <path d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 438.1 50" class="crisp">
    <path class="b" d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
    <path class="a" d="M120 0C78.3 0 69.2 7.5 52.4 27.3 35.7 47 0 50 0 50h438s-35.2-2.6-52.4-22.7C368.4 7.3 359.6 0 318 0z" />
</svg>

Link to JSFiddle