SVG fill artifact in Chrome

Question

I have one polygon path, which is filled with a color. This works perfectly in Firefox and IE.

In Chrome depending on size - artifacts appear. In the example here, there is a diagonal gradient, instead of a plain color.

Question, how can I solve this, or what workarounds exist?

If the bug is not visible, width has to be changed, as its not always triggered. In JSFiddle that is very simple, as the size of the preview container can be easily changed.

The bug only happens when shaperendering is not set to 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

Screenshot from the JsFiddle demonstrating the bug:

Answer 1

所以我找到了一个解决方法 - 但感觉就像一个黑客。因此，我对解决方案并不满意;我希望有更好的方法。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Link to JSFiddle