在Chrome中的SVG填充神器

我有一个多边形路径，它填充了一种颜色。这在Firefox和IE中完美起作用。在Chrome中的SVG填充神器

在Chrome中，根据尺寸而定 - 出现工件。在这里的例子中，有一个对角线渐变，而不是一个普通的颜色。

问题，我该如何解决这个问题，或者存在哪些解决方法？

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

这个错误只发生在没有设置为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屏幕截图，展示的bug：

来源

2017-09-07 user5542121

它可能与[此Chrome的bug（https://bugs.chromium.org/p/chromium/issues/detail ？ID = 691262）。您可能想在crbug.com上报告并让他们决定。 –

@PaulLeBeau thx，我引用它 – user5542121

最可能出现同样的问题：https://stackoverflow.com/questions/41946156/strange-diagonal-lines-in-chrome-chromium-bug – user5542121

于是我找到了一个解决办法 - 但它的感觉就像一个黑客攻击。因此，我对解决方案并不满意。我希望有更好的办法。

基本上填充颜色获得形状呈现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

来源

2017-09-07 08:49:53 user5542121

在Chrome中的SVG填充神器

回答

相关问题