从matplotlib导出为SVG时,如何避免相邻绘制的条形之间的空白?

qzwqbdag  于 2022-11-30  发布在  其他
关注(0)|答案(1)|浏览(176)

我正在用matplolib绘制一个条形图,其中的条形彼此相邻,中间没有空格。
但是,当导出为.svg时,条形之间的空白(白色)是可见的。bar chart with blank spaces between bars when exported as .svg
导出为PDF(也作为矢量图形)时,不显示空格。bar chart without blank spaces between bars when exported as .pdf

bnlyeluc

bnlyeluc1#

如果条形图没有与像素边界完全对齐,SVG渲染器将尝试对它们进行抗锯齿处理,从而使相邻条形图之间的色块更亮。
例如,下面有两个SVG,宽度都是200像素。第一个显示了一个具有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中。这会完全禁用抗锯齿功能,因此可能会导致其他问题。)

相关问题