JavaScript で svg は何をするのでしょうか?-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-01-19 14:44:50

オリジナル

2851 人が閲覧しました

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

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

このチュートリアルの動作環境: 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(&#39;canvas&#39;).size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: &#39;#f06&#39; })

ログイン後にコピー

次のパラメータ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(&#39;canvas&#39;).size(&#39;100%&#39;, &#39;100%&#39;)

ログイン後にコピー

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

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

if (SVG.supported) { 
var draw = SVG(&#39;canvas&#39;) 
var rect = draw.rect(100,100) } 
else { 
alert(&#39;SVG not supported&#39;) }

ログイン後にコピー

ViewBox

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

ログイン後にコピー

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

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

ログイン後にコピー

パラメータがない場合、ビューボックスは空の

var box = draw.viewbox()

ログイン後にコピー

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

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

ログイン後にコピー

## を含めることができます。 #ビューボックスのサイズ

#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 サイトの他の関連記事を参照してください。