0

こんにちは、svg (2D 線画) とドキュメント コンテキストが動的に生成される Django テンプレートによってレンダリングされたドキュメントで svg インラインを提供しようとしています。svg_string は私の django コンテキストに入れられ、テンプレートによってレンダリングされます。

{{ svg_string|safe }}

私が使用している django のバージョンは 1.4.2 で、Python のバージョンは 2.7.3 です。svg は完全にレンダリングされます。

代わりに、django（1.4.2）開発サーバーを使用してビューを含むSVGをテストしようとするとhttp://127.0.0.1:8000

Chrome、Firefox、および Safari でレンダリングされた svg のテキスト ラベルのみを取得します。

ただし、2 つの svg には 1 つの違いがあります。これらは、バックエンドで cairo を使用する rdkit Cheminformatics ライブラリのさまざまなバージョンによって生成されます。

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 は、テキストとして表示すると異なる構造を持ち、次のような動作を示します: ファイルに保存した後、ブラウザーでレンダリング: 機能します。content-type を 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 (ブートストラップ) が破損するため、実行できません。

開発中にこの svg を正しくレンダリングするために、他の提案された回避策を試しましたが、うまくいきませんでした。

xhtml+xml コンテンツ タイプを使用せずに、上記の rdkit ライブラリによって提供されるインライン svg を開発サーバーでレンダリングする方法はありますか?

4

1 に答える 1

2

ブラウザはXML 名前空間text/htmlを認識しないため、ドキュメントにこの SVG を描画しないと思います。svgSVG をデフォルトの名前空間に配置する必要があります。これを試して：

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

これは開発のニーズには十分なはずのハックですが、本番環境でこれを行う場合は、ElementTree またはその他の XML ライブラリを使用してより正確に行う必要があります。

于 2013-11-16T15:54:01.850 に答える