在 Chrome 上显示深色描边的 SVG 图像

Question

我在显示我的网站项目的 SVG 徽标图像时遇到问题：

我可以在矢量对象的边缘（边界）周围看到细细的黑线。它似乎在曲线周围很普遍。没有边框，至少在 Illustrator 上创建时是这样，也没有隐藏在下面的任何其他深色物体。

据我测试，在Firefox、Safari、IE11上似乎没问题，但不适用于 Chrome(v43) 和 Android-Stock-Browser(v4.2).

edit: I made a sample here. It has 'S' shaped orange object on square background object with the exact same color. No object here has border. This is made on Illustrator CS3, and I created SVG file with the same, as how it originally was done for my project.

截图对比如下：

和fiddle： http://jsfiddle.net/alexklaus80/tp0adzqn/

这是本例中使用的 SVG 文件的代码：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g id="Layer_copy">
    <rect x="-30.987" y="-30.357" style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" width="156.636" height="156.634"/>
    <g>
        <path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" d="M70.966,51.515c1.779,1.968,3.086,4.138,3.934,6.476
            c0.854,2.356,1.277,5.081,1.277,8.194c0,7.416-2.74,13.531-8.225,18.345c-5.482,4.812-12.287,7.218-20.413,7.218
            c-3.745,0-7.49-0.587-11.239-1.748c-3.747-1.164-6.98-2.575-9.703-4.227l-2.544,4.314h-4.735l-0.832-28.755h4.795
            c0.982,3.548,2.134,6.755,3.454,9.612c1.327,2.861,3.067,5.539,5.24,8.019c2.048,2.333,4.449,4.18,7.19,5.562
            c2.737,1.385,5.924,2.075,9.552,2.075c2.726,0,5.099-0.363,7.132-1.069c2.031-0.71,3.674-1.72,4.936-3.023
            c1.266-1.302,2.203-2.83,2.814-4.599c0.605-1.755,0.912-3.781,0.912-6.064c0-3.356-0.945-6.488-2.838-9.396
            c-1.895-2.9-4.721-5.099-8.463-6.603c-2.561-1.023-5.502-2.151-8.816-3.393c-3.315-1.238-6.173-2.407-8.577-3.504
            c-4.736-2.127-8.412-4.915-11.037-8.368c-2.621-3.454-3.935-7.958-3.935-13.514c0-3.195,0.652-6.169,1.954-8.935
            c1.298-2.756,3.155-5.228,5.559-7.392c2.283-2.052,4.988-3.663,8.106-4.82c3.115-1.167,6.367-1.748,9.758-1.748
            c3.865,0,7.328,0.592,10.387,1.778c3.055,1.18,5.85,2.565,8.365,4.138l2.432-4.022h4.729l0.473,27.869h-4.785
            c-0.867-3.198-1.844-6.255-2.934-9.172c-1.082-2.916-2.496-5.56-4.227-7.927c-1.697-2.288-3.768-4.115-6.219-5.475
            c-2.441-1.358-5.437-2.04-8.987-2.04c-3.748,0-6.941,1.203-9.585,3.609c-2.645,2.408-3.971,5.347-3.971,8.815
            c0,3.633,0.856,6.635,2.552,9.024c1.692,2.387,4.156,4.352,7.396,5.886c2.877,1.38,5.706,2.578,8.495,3.58
            c2.776,1.004,5.469,2.081,8.071,3.229c2.365,1.022,4.645,2.187,6.834,3.487C67.448,48.261,69.354,49.776,70.966,51.515z"/>
    </g>
</g>
</svg>

所以它支持看起来只是一个橙色方块，但在 Chrome 上，它显示带有轻微褐色边框的字母 S。

我一直在网上搜索类似的问题，但没有任何线索。我猜是生成器 (Illustrator CS3) 的问题？？

Answer 1

我找到了解决方案，但由于评论部分的@PaulLeBeau，我得到了更多语义解决方案，所以我把它放在第一位。

示例代码：之前

<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" .. />

1.删除 stroke:#EF8200;，并将 stroke-width 的值从 0.2 更改为 none

<path style="fill:#EF8200;stroke-width:none;" .. />

或者..我自己找到了其他解决方案。貌似没有上面那个好，不过放在这里仅供参考，说确实解决了。

2。将 stroke-width 的值从 0.2 更改为 0

<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0;" .. />

3。删除 stroke:#EF8200;stroke-width:0.2;

<path style="fill:#EF8200;" .. />

我不明白为什么Illustrator 会为原本没有描边的对象增加宽度。也许这是 Illustrator CS3 和 Chrome/Browser 的错误？

Answer 2

在 Illustrator 上编辑时，请检查您正在使用的背景上是否没有添加描边（见图）

双击背景并将“描边”值更改为零

这就是我轻松删除出现在创建的其中一个徽标中的笔画的方法enter image description here

在 Chrome 上显示深色描边的 SVG 图像

SVG image showing dark stroke on Chrome

svg

google-chrome

android-browser