HTMLページをSVGに挿入するさまざまな方法

<svg>タグを使用して、コンテンツをWebページに直接挿入し、DOMの一部になり、CSSとJSを使用して制御できます。

単純な円：

 <svg width = 400 heihgt = 300 id = testsvg> <circle cx = 100 cy = 100 r = 50 fill = red stroke = red stroke-width = 2 id = testcircle> </circle> </svg> // #ccc;} #testsvg circle {fill：red;ストローク：青;ストローク幅：3; } </style> // JSを使用してSVGを操作し、簡単なアニメーションなどを作成できます。 circle.addeventlistener（click、function（e）{console.log（click circle ...）; circle.setattribute（r、65）;}、false）; </script> // JSを使用することに加えて、アニメーション効果を作成するためにSVGのアニメートを使用できます<SVG width = 400 Heigh <Animate AttributeName = cx from = 100から= 300 dur = 2s RepeatCount = intefinite> </animate> </circle> </svg>

表示効果：

<img> <embed> <object> <iframe>およびその他のタグを使用して、SVGファイルをWebページに挿入できます。

<img>を除き、ダブルタグを使用する必要があります。

 //Use the <img> tag <img src=test.svg' />//or the base64 encoding of SVG <img src=data:image/svg+xml;base64,[data] />//Use the <embed> tag <embed id=embedSvg type=image/svg+xml src=test.svg></embed>//Get SVG domvar embedsvg = document.getElementbyId（embedsvg）.getSvgdocument（）; console.log（svg dom：、embedsvg）; // <object> tag> object <objectsvg type = image/svg+xml data = test.svg> </object document.getElementById（objectSvg）.getSvgdocument（）; console.log（svg dom：、objectsvg）; // <iframe> tag <iframe id = iframevg src = test.svg> </iframe> // get svg domvar iframesvg = get svg domvar document.getElementById（iframesvg）.contentdocument; console.log（svg dom：、iframesvg）;

SVG DOM出力：

他のWebページ要素の背景画像としてSVGを使用する

これは、SVGをWebページに挿入するための偽装された方法です。つまり、SVGを通常の画像として使用し、アニメーション効果を表示できません。

 <style type = text/css> .svg-div {width：400px; height：300px; background：url（test.svg）no-Reepeat Center/50％; border：1px solid #ccc;} </style> <div class = svg-div> </div>

効果：

SVGファイルは基本的にXMLテキストの一部であるため、SVGソースコードはXMLコードを読み取ることで読み取ることができます。

 var svgstr = new xmlserializer（）。serializetostring（document.getElementbyId（testsvg））; console.log（svgstr）;

これは、HTMLページにSVGを挿入するさまざまな方法に関するこの記事の終わりです。関連するHTML挿入SVGコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！