<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>表示効果:
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ソースコードをお読みくださいSVGファイルは基本的にXMLテキストの一部であるため、SVGソースコードはXMLコードを読み取ることで読み取ることができます。
var svgstr = new xmlserializer()。serializetostring(document.getElementbyId(testsvg)); console.log(svgstr);要約します
これは、HTMLページにSVGを挿入するさまざまな方法に関するこの記事の終わりです。関連するHTML挿入SVGコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています!