Safari / Chrome / Firefox之间的SVG渲染不同

Question

我正在动态生成一个数字作为网站的一部分。该图由matplotlib生成，作为Django视图函数的一部分。在view函数中，我将图形渲染为SVG，然后将SVG的内容添加到视图的上下文中，然后使用该上下文渲染一个非常简单的模板。它是特定传感器随时间变化的温度图。

当我在浏览器中查看页面时，一切都正常，一般来说：图表显示在正确的位置，通常显示正确的信息。但是，在Safari与Chrome或Firefox中查看时，图像看起来会有所不同。

以下是Chrome / Firefox的外观：

以下是Safari的外观：

SVG本身的链接是here。

这里是生成SVG的代码：

from django.views.generic import TemplateView
from mysite.models import TempReading, TempSeries
import numpy as np
import pandas as pd
from matplotlib.figure import Figure
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
import seaborn as sbn
import StringIO

class TestView(TemplateView):
    template_name = 'mysite/test.html'
    def get_context_data(self, **kwargs):
        upstairs = TempSeries.objects.get(name='Upstairs')
        upstairstemps = upstairs.tempreading_set.all().order_by('-timestamp')

        frame = pd.DataFrame(list(upstairstemps.values()))
        frame.set_index('timestamp', inplace=True)

        fig = Figure()
        ax = fig.add_subplot(1,1,1)
        frame['value'].plot(ax=ax)
        ax.get_xaxis().grid(color='w', linewidth=1)
        ax.get_yaxis().grid(color='w', linewidth=1)

        fig.set(facecolor='w')
        canvas = FigureCanvas(fig)

        imgdata = StringIO.StringIO()
        canvas.print_svg(imgdata)

        imgstr = imgdata.getvalue()

        context = super(TestView, self).get_context_data(**kwargs)
        context['svgtext'] = imgstr

        return context

关于SVG在不同浏览器中呈现不同的原因的任何想法？