为什么我在打印模式下在SVG图标附近看到额外的线条？

Question

我在页面上有一些SVG图标，但是当我尝试打印页面时，我可以在预览中看到一些额外的边线将被打印(并且正在被打印)。

​

​

如果我更改缩放级别，这些线条往往会消失，但我仍然可以在实际打印的纸张上看到它们。

应用程序是在React中完成的，但我不认为这有任何影响，因为如果我只查看SVG图标的打印预览，我可以看到同样的问题。

我尝试增加SVG的viewBox、容器元素的大小，并在<svg>元素上添加fill="none"，但都没有效果。

这是我在应用程序中使用的图标之一：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="33px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
    <defs>
        <path d="M16.5,32 C7.93958638,32 1,25.0604136 1,16.5 C1,7.93958638 7.93958638,1 16.5,1 C25.0604136,1 32,7.93958638 32,16.5 C32,25.0604136 25.0604136,32 16.5,32 Z M16.5,30 C23.9558441,30 30,23.9558441 30,16.5 C30,9.04415588 23.9558441,3 16.5,3 C9.04415588,3 3,9.04415588 3,16.5 C3,23.9558441 9.04415588,30 16.5,30 Z M22.4283814,11.3631277 L14.0480414,19.7309601 L11.3280853,17.0150634 C10.6594033,16.3731302 9.59921563,16.3835368 8.94330153,17.0384719 C8.28738743,17.6934071 8.27696531,18.7520124 8.91985804,19.4196964 L12.7728601,23.2669478 C13.5169128,23.9110174 14.6219722,23.9110174 15.3660249,23.2669478 L24.8576059,13.789533 C25.1799837,13.4678435 25.3611111,13.0314145 25.3611111,12.5763304 C25.3611111,12.1212462 25.1799837,11.6848173 24.8576059,11.3631277 C24.1866054,10.6937722 23.099382,10.6937722 22.4283814,11.3631277 Z" id="path-1"></path>
    </defs>
    <g id="Visual-/-Icons-/-Md-/-check-circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use id="Shape" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
        <g id="Base-/-Colour-/-Brand-/-Primary-dark" mask="url(#mask-2)" fill="#009c41">
            <rect id="Rectangle-2-Copy-5" x="0" y="0" width="33" height="33"></rect>
        </g>
    </g>
</svg>

在更改缩放级别或打印时，有没有办法避免这些额外的边线？

Answer 1

由于您绘制此形状的方式相当不合常规，因此您会看到一些“出血”。

尝试只绘制形状本身：

​

<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="33px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
    <path d="M16.5,32 C8,32 1,25 1,16.5 C1,8 8,1 16.5,1 C25,1 32,8 32,16.5 C32,25 25,32 16.5,32 Z M16.5,30 C24,30 30,24 30,16.5 C30,9 24,3 16.5,3 C9,3 3,9 3,16.5 C3,24 9,30 16.5,30 Z M22.5,11.5 L14,19.5 L11.5,17 C10.5,16.5 9.5,16.5 9,17 C8.5,17.5 8.5,18.5 9,19.5 L13,23.5 C13.5,24 14.5,24 15.5,23.5 L25,14 C25,13.5 25.5,13 25.5,12.5 C25.5,12 25,11.5 25,11.5 C24,10.5 23,10.5 22.5,11.5 Z" fill="#009c41"></path>
</svg>

​

我还整理了路径本身-你的数字不需要亚微像素的精度，所以我只需要将每个数字四舍五入到最接近的半像素-即使这样也可能是矫枉过正。从长远来看，节省了很多字节！