从 matplotlib 导出为 SVG 时，如何避免彼此相邻绘制的条形之间的空格？答案

【问题标题】：How to avoid blank spaces between bars which are plotted next to each other when exporting as SVG from matplotlib?从 matplotlib 导出为 SVG 时，如何避免彼此相邻绘制的条形之间的空格？
【发布时间】：2022-11-25 00:07:10
【问题描述】：

我正在使用 matplotlib ax 条形图进行绘图，其中条形图彼此相邻，中间没有空格。

但是，当导出为 .svg 时，条形之间的空白（白色）空间是可见的。 bar chart with blank spaces between bars when exported as .svg

导出为 PDF（也为矢量图形）时不显示空格。 bar chart without blank spaces between bars when exported as .pdf

【问题讨论】：

嗯，条形图（或在其他平铺情况下的网格）通常会在 pdf 中重新出现，尤其是在用作源的图像中看到时，因此怀疑某些 pdf 查看器可能不是相同的结果，原因通常是边界条件，其中两个区域被赋予 50% 的颜色，就像 100% 一样混合，但两个 50% 可以被视为平均，下面更好地解释为抗锯齿。

标签： python matplotlib svg vector-graphics

【解决方案1】：

如果您的条形图未与像素边界完美对齐，则 SVG 渲染器将尝试对它们进行抗锯齿处理，从而导致相邻条形图之间出现较亮的色块。

例如，这里有两个都是 200 像素宽的 SVG。第一个显示包含 21 个条的条形图。由于条形图未与像素边界对齐，因此它们之间存在间隙。第二个有 20 个小节。每个条形在左右边缘都有整数 x 坐标，并且没有可见的间隙。

<svg width="200" height="100" viewBox="0 0 200 100">
<g fill="#f00">
<!-- Notice the non-integer x coordinates (0.0, 9.5, 19.0, 28.6, etc. -->
<path d="M0.0 50.0V90.0H9.5V50.0Z"/>
<path d="M9.5 42.6V90.0H19.0V42.6Z"/>
<path d="M19.0 35.9V90.0H28.6V35.9Z"/>
<path d="M28.6 30.5V90.0H38.1V30.5Z"/>
<path d="M38.1 26.7V90.0H47.6V26.7Z"/>
<path d="M47.6 25.1V90.0H57.1V25.1Z"/>
<path d="M57.1 25.6V90.0H66.7V25.6Z"/>
<path d="M66.7 28.3V90.0H76.2V28.3Z"/>
<path d="M76.2 33.0V90.0H85.7V33.0Z"/>
<path d="M85.7 39.2V90.0H95.2V39.2Z"/>
<path d="M95.2 46.3V90.0H104.8V46.3Z"/>
<path d="M104.8 53.7V90.0H114.3V53.7Z"/>
<path d="M114.3 60.8V90.0H123.8V60.8Z"/>
<path d="M123.8 67.0V90.0H133.3V67.0Z"/>
<path d="M133.3 71.7V90.0H142.9V71.7Z"/>
<path d="M142.9 74.4V90.0H152.4V74.4Z"/>
<path d="M152.4 74.9V90.0H161.9V74.9Z"/>
<path d="M161.9 73.3V90.0H171.4V73.3Z"/>
<path d="M171.4 69.5V90.0H181.0V69.5Z"/>
<path d="M181.0 64.1V90.0H190.5V64.1Z"/>
<path d="M190.5 57.4V90.0H200.0V57.4Z"/>
</g>
</svg>
<svg width="200" height="100" viewBox="0 0 200 100">
<g fill="#080">
<!-- Here, the x coordinates are all integers (0, 10, 20, 30, etc.) -->
<path d="M0.0 50.0V90.0H10.0V50.0Z"/>
<path d="M10.0 42.3V90.0H20.0V42.3Z"/>
<path d="M20.0 35.3V90.0H30.0V35.3Z"/>
<path d="M30.0 29.8V90.0H40.0V29.8Z"/>
<path d="M40.0 26.2V90.0H50.0V26.2Z"/>
<path d="M50.0 25.0V90.0H60.0V25.0Z"/>
<path d="M60.0 26.2V90.0H70.0V26.2Z"/>
<path d="M70.0 29.8V90.0H80.0V29.8Z"/>
<path d="M80.0 35.3V90.0H90.0V35.3Z"/>
<path d="M90.0 42.3V90.0H100.0V42.3Z"/>
<path d="M100.0 50.0V90.0H110.0V50.0Z"/>
<path d="M110.0 57.7V90.0H120.0V57.7Z"/>
<path d="M120.0 64.7V90.0H130.0V64.7Z"/>
<path d="M130.0 70.2V90.0H140.0V70.2Z"/>
<path d="M140.0 73.8V90.0H150.0V73.8Z"/>
<path d="M150.0 75.0V90.0H160.0V75.0Z"/>
<path d="M160.0 73.8V90.0H170.0V73.8Z"/>
<path d="M170.0 70.2V90.0H180.0V70.2Z"/>
<path d="M180.0 64.7V90.0H190.0V64.7Z"/>
<path d="M190.0 57.7V90.0H200.0V57.7Z"/>
</g>
</svg>

（或者，您可以尝试将 shape-rendering="crispEdges" 添加到您的 SVG。这将完全禁用抗锯齿，因此可能会导致其他问题。）

【讨论】：