使用CairoSVG转换的SVG文件中PNG的透明度错误

Question

我们正在使用CairoSVG（http://cairosvg.org/）把svg字符串数据转换成png格式，并将这个png返回给浏览器。这个svg字符串是直接从我们FusionCharts图表的getSVGString()方法中获取的。

如果我把这个字符串保存为本地的svg文件，然后在Illustrator或浏览器中打开，它看起来是没问题的。这里是svg数据：http://pastebin.com/GG0vqWF4

这张图片应该是这样的：http://pbrd.co/1nE9y11

但是在返回给浏览器的png中，所有的圆圈都是空的：http://pbrd.co/1nE9IFL

这里是进行转换的Python代码：

import cherrypy
import cairocffi as cairo
import cairosvg
...

class SaveImagePage(LoggedInPage):
    @cherrypy.expose
    def index(self, svgString, **params):
        png = cairosvg.svg2png(svgString)

        cherrypy.response.headers['content-type'] = 'image/png'
        cherrypy.response.headers['content-disposition'] = \
            'attachment; filename="BrandIndex Chart.png"'

        return png

有没有什么想法？我对svg格式不太熟悉，而且Cairo没有抛出任何错误；我不太确定这里可能出了什么问题。

Answer 1

这看起来是CairoSVG的问题。

关于你遇到的具体问题，早期版本的FusionCharts（3.4之前）在生成的SVG字符串中有%和:这些字符的问题。最新版本的FusionCharts修复了这个问题，生成的SVG在使用Inkscape和Batik库导出时没有问题。

我已经替换了你分享的SVG字符串中的问题字符%和:，然后用Inkscape和Cairo导出了。在Inkscape中导出的图片是正确的，但在Cairo中问题依然存在。

如果你愿意使用其他导出库，可以选择Inkscape。不过FusionCharts也有自己的导出功能，如果你想让导出的png文件在浏览器中下载，使用FusionCharts的导出功能就可以满足这个需求。