SVG描画機能：SVGで花の描画を実現（コード付き）

この記事の内容は SVG の描画機能に関するものです。SVG は花の描画を実現します (コード付き)。必要な友人が参考になれば幸いです。

5ba626b379994d53f7acf72a64f9b697 と SVG および VML の重要な違いは、5ba626b379994d53f7acf72a64f9b697 には JavaScript ベースの描画 API があるのに対し、SVG と VML は描画の記述に XML ドキュメントを使用することです。

1. XXX.svg ファイルを作成します (このファイルにより赤い丸が作成されます)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

SVG は XML で記述され、.svg ファイルとして保存されます。 .svg ファイルは .html ファイルで参照する必要があります

2. HTML 内の svg

1) d8e2720730be5ddc9c2a3782839e8eb6 タグを使用します: はすべての主要なブラウザーでサポートされており、許可されています。スクリプトの使用

注: SVG を HTML ページに埋め込む場合は、d8e2720730be5ddc9c2a3782839e8eb6 タグを使用するのが Adob​​e SVG Viewer の推奨方法です。ただし、有効な XHTML を作成する必要がある場合は、d8e2720730be5ddc9c2a3782839e8eb6 は使用できません。 HTML 仕様には d8e2720730be5ddc9c2a3782839e8eb6 タグはありません。

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage: プラグインをダウンロードするための URL を指します

2) オブジェクト タグを使用します: html4 標準タグ、すべての新しいブラウザーでサポートされます。スクリプトは許可されません

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

codebase: ダウンロードする URL を指しますプラグイン

3) iframe タグ: (推奨)

<iframe src="rect.svg" width="300" height="100">
</iframe>

3. SVG 形状

1. 長方形 09cbcf01dd0387af37ac9f1e1f2ac4a1

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

style 属性 CSS プロパティを定義するには

ストローク幅プロパティは長方形の境界線の幅を定義します

ストロークプロパティは長方形の境界線の色を定義します

2、円30de22e41cb8eb8fbfdc1f091d85e4be

3、楕円4a9de162d602d15572b4544265d9829d

5、polygon6f1cb7f8499a7e0f625f982868cbc44d

6、polylinece803ba1a4290bddb3ba9c6f57d4c9b4

を定義します。

7, path98953a78f52873edae60a617ec082494

in6b53f3b1a1757e7a3dce01edd2dfa499元素的使用及marker属性的介绍">svg 53207a333cb59025d48bd080b9112b21 要素の説明と marker 属性の導入

SVG で座標系変換を実装する方法 (コード付き)

以上がSVG描画機能：SVGで花の描画を実現（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。