ChromeのSVG塗りつぶし

Question

色が塗りつぶされたポリゴンパスが1つあります。 これはFirefoxとIEで完全に機能します。

サイズに応じてChromeに - アーティファクトが表示されます。ここの例では、平らな色の代わりに斜めの勾配があります。

質問この問題を解決するにはどうすればよいですか、またはどのような回避策が存在しますか？

バグが表示されない場合は、必ずしも発生しないので、幅を変更する必要があります。 JSFiddleでは、プレビューコンテナのサイズを簡単に変更できるため、非常に簡単です。

シェイプレンダリングがクリスプエッジに設定されていない場合にのみ、バグが発生します。

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

だから私は、回避策を見つけた - しかし、それはハックのように感じています。そのため、私はその解決策には本当に満足していません。私は良い方法があることを願っています。

基本的に、塗りつぶしの色がシェイプレンダリングの鮮明度を得て、ピクセル化された境界を作成します。 ピクセル化された境界線を取り除くために、同じパスを再度追加して、透明な塗りつぶしと形状レンダリングの自動化を行いました。

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