rdkit svg 风格和在 django 开发服务器上渲染内联 svg

Question

您好，我正在尝试在由 Django 模板呈现的文档中提供 svg 内联，其中 svg（2D 线条图）和文档上下文是动态生成的。 svg_string 被放入我的 django 上下文并由模板渲染。

{{ svg_string|safe }}

我使用的 django 版本是 1.4.2 ，Python 版本是 2.7.3 .rdkit 我的所有代码在永久 IP 上都运行良好。 svg 呈现完美。

现在，当我尝试使用 django (1.4.2) 开发服务器 http://127.0.0.1:8000 测试包含视图的 SVG 时

我只得到在 Chrome、Firefox 和 Safari 中呈现的 svg 中的文本标签。

然而，这两个 svg 之间有一个区别。它们由不同版本的 rdkit Cheminformatics 库生成，该库在后端使用 cairo。

生产服务器提供的 svg 在 html 页面的视图源中具有 svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300pt" height="300pt" viewBox="0 0 300 300" version="1.1">
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 0.40625 1.421875 L 0.40625 -5.640625 L 4.40625 -5.640625 L 4.40625 1.421875 Z M 0.84375 0.96875 L 3.953125 0.96875 L 3.953125 -5.1875 L 0.84375 -5.1875 Z "/>
</symbol>
<symbol overflow="visible" id="glyph0-1">
<path style="stroke:none;" d="M 0.78125 -5.828125 L 1.84375 -5.828125 L 4.4375 -0.953125 L 4.4375 -5.828125 L 5.203125 -5.828125 L 5.203125 0 L 4.140625 0 L 1.546875 -4.875 L 1.546875 0 L 0.78125 0 Z "/>
</symbol>
<symbol overflow="visible" id="glyph0-2">
<path style="stroke:none;" d="M 0.78125 -5.828125 L 1.578125 -5.828125 L 1.578125 -3.4375 L 4.4375 -3.4375 L 4.4375 -5.828125 L 5.234375 -5.828125 L 5.234375 0 L 4.4375 0 L  
....

开发服务器 svg 在以文本形式查看时具有不同的结构，并显示以下行为：将其保存到文件后在浏览器中呈现：有效。将内容类型强制为 xhtml+xml 后在浏览器中呈现：有效。

不使用默认的 content-type 呈现内联。只显示字体。

svg 看起来像

<svg:svg version="1.1" baseProfile="full"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xml:space="preserve" width="300px" height="300px" >
<svg:line x1="114.41" y1="132.42" x2="130.03" y2="146.44" stroke="rgb(0,0,0)" stroke-width="1"></svg:line>
<svg:line x1="113.56" y1="136.50" x2="126.06" y2="147.72" stroke="rgb(0,0,0)" stroke-width="1"></svg:line>

<svg:line x1="87.26" y1="137.68" x2="96.45" y2="142.94" stroke="rgb(0,0,255)" stroke-width="1"><

遗憾的是，使用 xhmtl+xml 会破坏我所有的 css 和 javascript（引导程序），因此无法使用。

I have tried the other suggested workarounds to get this svg rendered correctly during development did not work for me.

有没有办法让上面显示的 rdkit 库提供的内联 svg 在开发服务器中呈现而不使用 xhtml+xml 内容类型？

Answer 1

我相信浏览器不会在 text/html 文档中绘制此 SVG，因为它无法识别 svg XML 命名空间。您需要将 SVG 放在默认命名空间中。试试这个：

svg_string = svg_string.replace(u'svg:', u'').replace(u'xmlns:svg', u'xmlns')

这是一个足以满足您的开发需求的 hack，但是如果您想在生产环境中执行此操作，您应该使用 ElementTree 或任何其他 XML 库更正确地执行此操作。