Django Safari/Chrome/Firefox的SVG呈现方式不同

我动态生成一个图形作为网站的一部分。图形由

matplotlib

生成，作为Django视图函数的一部分。在view函数中，我将图形呈现为SVG，然后将SVG的内容添加到视图的上下文中，然后使用该上下文呈现一个非常简单的模板。这是一张特定传感器随时间变化的温度图

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

以下是它在Chrome/Firefox中的外观：

下面是它在Safari中的外观：

指向SVG本身的链接是

下面是生成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在不同浏览器中呈现不同的原因，您有什么想法吗？

请尝试在网格线上显式设置笔划宽度。笔划宽度默认为1，但这不能保证（我不在Mac电脑上，所以无法测试自己）。另一种可能是剪裁路径渲染不正确。您能在DOM检查器中找到网格线吗？如果是这样，它会给你什么样的维度？样式表中有错误吗？我不太确定我是否遵循了。开头的

ax.set\uu

上面的行都显式地为网格线设置了

linewidth

。当

linewidth

如上设置为1时，Safari中不会显示网格线，但Chrome中会显示干净的网格线。如果我显式地为任一轴或两个轴设置

linewidth=10

，Chrome将尊重该设置并显示非常宽的网格线，而Safari则继续不显示任何网格线。这很奇怪。实际的SVG文件（我刚才看到的）没有网格线的笔划宽度属性。可能库内部知道默认值为1，因此在这种情况下不必添加样式。不管怎么说，这只是一个在黑暗中拍摄。希望能够访问Safari的人能提供更多帮助。这是我关于类似主题的第一个问题。似乎没什么兴趣。上面的问题清楚吗/问题描述准确吗？不幸的是，我认为只有一小部分人会熟悉/感兴趣这个主题并访问正确的操作系统进行测试。同时还有一个建议：看看是否可以创建一个具有相同问题的SVG的简单版本（只需从matplotlib创建的文件开始，删除额外的元素，直到只有一个彩色背景和一条网格线）。我自己并不熟悉matplotlib，但是它创建的代码有很多额外的空元素，这可能会导致问题。