JavaScript で svg は何をするのでしょうか?

JavaScriptにおけるsvgとは、2次元のベクターグラフィックスを記述するためのXMLベースのグラフィックスフォーマットであるスケーラブルベクターグラフィックスを指します。「svg.js」は、svgの操作やアニメーションの定義ができる軽量なJavaScriptライブラリです。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript で svg は何をしますか?

SVG とは何ですか?

SVG はスケーラブル ベクター グラフィックスを指します

SVG は Web 用のベクターベースのグラフィックスを定義するために使用されます

SVG は XML 形式を使用してグラフィックスを定義します

SVG 画像は、グラフィック品質を損なうことなく拡大またはサイズ変更できます。

SVG は、World Wide Web Consortium の標準です。

SVG は、DOM や XSL などのツールと互換性があります。W3C 標準は、総合的な

はじめに:

SVG.js は、SVG を簡単に操作してアニメーションを定義できる軽量の JavaScript ライブラリです。

SVG (Scalable Vector Graphics) は、2 次元のベクター グラフィックスを記述するために使用される XML に基づくグラフィックス形式です。 SVG は W3C によって開発されたオープン標準です。

SVG.js には、移動、拡大縮小、回転、傾きなどのアニメーションを定義するためのメソッドが多数含まれています。詳細については、関連するデモを参照してください。

•読みやすく簡潔な構文

•非常に軽量で、gzip 圧縮バージョンはわずか 5kです

#•サイズ、位置、色などのアニメーション要素

•モジュール構造、簡単な拡張

##•さまざまな実用的なプラグイン

•さまざまな形状タイプの間で統一された API。

##•要素はイベントにバインドでき、タッチイベントが含まれます

• 不透明マスクの完全サポート

• 要素グループ

• 動的グラデーション

• 塗りつぶしモード

• 完全ドキュメント

SVG ドキュメントの作成

SVG() 関数を使用して、指定された HTML 要素内に SVG ドキュメントを作成します。

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

次のパラメータSVG() は、要素の ID または要素自体の ID にすることができます。

上記 2 つの文により、HTML ドキュメント内に次のコードが生成されます:

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

もちろん、SVG キャンバスのサイズを定義するには、ピクセルを使用するだけでなく、パーセンテージを使用することもできます。 。次のように:

var draw = SVG('canvas').size('100%', '100%')

ブラウザの SVG サポートの検出

svg.js を使用する前に、次のコードを使用して svg.js ライブラリのブラウザ サポートを検出できます:

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

486d7a50595533609bc98d44595dc670 のプロパティは、viewbox() メソッドを使用して決定できます。viewbox() メソッドは、以下に示すように setter 関数に似ています:

draw.viewbox(0,0,297,210)

上の行コードの は、次のコード行と同等です。最初の 2 つのパラメータは

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

パラメータがない場合、ビューボックスは空の 486d7a50595533609bc98d44595dc670 を直接返します:

var box = draw.viewbox()

viewbox() メソッドにはズーム属性

var box = draw.viewbox() var zoom = box.zoom

## を含めることができます。 #ビューボックスのサイズ 486d7a50595533609bc98d44595dc670 が実際の SVG キャンバスのサイズと同じ場合、ズームの値は 1 です。

#SVG ドキュメント

#svg.js は、「htmlDOM の外での作業」にもあります。以下に示すように、これは外部の js ファイルと同様、スタンドアロンの svg ファイルです。

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG(&#39;viewport&#39;) 
draw.rect(100,100).animate().fill(&#39;#f03&#39;).move(100,100) 
]]> 
</script> 
</svg>

関連する推奨事項: JavaScript 学習チュートリアル

以上がJavaScript で svg は何をするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。