ライブラリで生成(せいせい)したSVGの表示(ひょうじ)

SVG.js という JavaScript ライブラリで生成せいせいした SVG のコードを表示ひょうじできるようにしました。

HTML の div 要素ようそに生成せいせいした svg 要素ようそをテキストとして取とり出だし、表示ひょうじするようにしました。表示ひょうじは preプレ 要素ようそに取とり出だしたテキストを追加ついかしました。pre 要素ようそには SyntaxHighlighterシンタックスハイライター で行番号ぎょうばんごうや色いろを付つけるようにしています。

生成せいせいされた SVG のコードをここにも貼はっておきます。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="598" height="428" style="border: 1px solid lightgray;">
<polygon points="92,0 22,96 162,96" fill="#752424" stroke-width="2" stroke="#000000"/>
<polygon points="21,194 0,273 42,273" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<polygon points="162,193 142,273 183,273" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<polygon points="93,189 52,259 134,259" fill="#1f1f1f" stroke-width="2" stroke="#000000"/>
<rect width="141" height="142" x="22" y="97" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<polygon points="93,192 73,273 114,273" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="41" ry="43" cx="93" cy="145" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="33" ry="34" cx="93" cy="145" fill="#217dbb" stroke-width="2" stroke="#000000"/>
<ellipse rx="7" ry="8" cx="37" cy="220" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="7" ry="7" cx="64" cy="221" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="6" ry="7" cx="122" cy="221" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
<ellipse rx="5" ry="6" cx="146" cy="220" fill="#6e6e6e" stroke-width="2" stroke="#000000"/>
</svg>

SVG.js で生成せいせいされる SVG には改行かいぎょうが含ふくまれていないので、JavaScript のプログラムの中なかで改行かいぎょうを入いれるようにテキストを置換ちかんしています。

生成せいせいした SVG を表示ひょうじする部分ぶぶんのプログラムはこんな感かんじです。

    var svgNode = document.getElementById('svg').children[0];
    var codeNode = document.getElementById('code')
    // Get generated SVG code
    var svgText = new XMLSerializer().serializeToString(svgNode);
    // Show the code with additional new lines
    codeNode.textContent = svgText.replace(/></g, '>\n<');

とても簡潔かんけつです。

詳細しょうさいはブログ「生成せいせいしたSVGの表示ひょうじ」をご覧らんください。