見出し画像

ライブラリで生成(せいせい)した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の表示ひょうじ」をごらんください。


この記事が気に入ったらサポートをしてみませんか?