Question

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

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

据我测试，它似乎在Firefox，Safari，IE11上都没问题，但不适用于Chrome（v43）和Android-Stock-Browser（v4.2）。

编辑：我在这里做了一个样本。它有＆＃39; S＆＃39;形状橙色的对象在方形背景对象与完全相同的颜色。这里没有物体有边界。这是在Illustrator CS3上制作的，我创建的SVG文件和我原来为我的项目完成的一样。

此处的屏幕截图对比：

enter image description here

小提琴： 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 /浏览器的错误？

Answer 2

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

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

通过这种方式，我轻松删除了所创建的徽标之一中出现的笔划enter image description here

SVG图像显示Chrome上的黑色笔划

2 个答案: