HTML SVG-htmlチュートリアル-php.cn

HTML での SVG の例

例 #1 – HTML で SVG を使用して四角形を描画する

例 #2 – SVG で角の丸い正方形を描画する

例 #3 – SVG で円を描き、その中にアウトラインとカラーファイリングを行う

例 #4 – HTML5 の SVG を使用して直線を描画する

例 #5 – HTML5 の SVG を使用して日食を描画する

例 #6 – HTML5 で SVG を使用してポリゴンを作成する

例 #8 – HTML5 で SVG を使用してテキストを描画する

結論

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML SVG

王林

Sep 04, 2024 pm 04:40 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML での画像の使用は、マルチメディアが豊富な Web サイトに最適です。 HTML コードにタグを追加するだけで、ブラウザが表示され、選択した画像へのリンクも追加されます。 JPG や PNG は解像度を超えてズームインすると、それ以上の詳細が表示されないため、画像や図がズームインされることがわかっていると少し面倒になります。 SVG はこの問題の解決策です。 SVG はスケーラブルベクターグラフィックスの略です。名前が示すように、必要なだけズームインでき、細部が消えることはありません。 SVG は Web テクノロジーに限定されたものではありませんが、HTML で使用すると非常に便利です。 SVG は、ブラウザーでの図、ベクトル、チャート、グラフの作成に役立ちます。

HTML に SVG を埋め込む構文:

HTML5 でのキャンバスの使用と同様に、HTML5 ページに SVG を埋め込むために使用できる簡単なタグがあります。

構文:

<svg width="width here" height="height here ">
…. …. …. ….
</svg>

ログイン後にコピー

HTML での SVG の例

以下に、HTML5 で作成および埋め込みできるベクターの例をいくつか示します。

例 #1 – HTML で SVG を使用して四角形を描画する

コード:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/>
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #2 – SVG で角の丸い正方形を描画する

角が丸い正方形の場合、正方形のサイズと寸法とは別に、rx、ry を使用して角の半径を定義する必要があります。

コード:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #3 – SVG で円を描き、その中にアウトラインとカラーファイリングを行う

コード:

<!DOCTYPE html>
<html>
<body>
<svg width= "400" height= "400">
<circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #4 – HTML5 の SVG を使用して直線を描画する

を使用できます。 HTML5 SVG で直線を描くためのタグ。色、線の太さ、位置を定義できます。

コード:

<html>
<body>
<svg width= "400" height= "400">
<line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/>
</svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #5 – HTML5 の SVG を使用して日食を描画する

を使用できます。 HTML5 SVG で日食を描画するためのタグ。その色と位置は、その半径に沿って定義できます。

コード:

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" />
Sorry but this browser does not support inline SVG.</svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #6 – HTML5 で SVG を使用してポリゴンを作成する

タグは、 SVG でポリゴンを作成するために使用できます。タグには各点の位置を記載する必要があります。塗りつぶしの色や輪郭の太さなどもコード内で定義できます。

コード:

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600" >
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #7 – HTML5 で SVG を使用してポリラインを作成する

ポリラインは、直線のみで構成される形状を描画するために使用されます。これらの線も接続する必要があることに注意してください。これは、HTML5 でのポリライン実装の例です。

コード:

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #8 – HTML5 で SVG を使用してテキストを描画する

テキストは、チャートのラベル付けなど、さまざまな状況で SVG に必要になる可能性があります。幸いなことに、

というテキストが存在します。使用できるSVGのタグ。テキストは SVG 内の任意の位置に設定でき、色やその他の詳細もカスタマイズできます。

コード:

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #9 – HTML5 の SVG を使用して星を描画する

基本は完了したので、SVG を使用して作成されるスターを作成しましょう。

コード:

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198"
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

例 #10 – SVG での線形グラデーションの使用

SVG の多くのライン HTML Canvas では、線形および放射状のグラデーションを使用できます。グラデーションは内にネストする必要があります。タグ。このタグは、その使用法を示すために SVG タグ内でマークされます。日食でグラデーションを使用する例を見てみましょう。

コード:

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

ログイン後にコピー

出力:

HTML SVG

結論

図やチャートが使用されるサイトの場合、SVG は救世主です。最新の Web ブラウザのほとんどは、スケーラブルであることに加えて、SVG もサポートしています。 SVG を使用するもう 1 つの利点は、ファイルサイズです。 SVG はほんの少しのコードであるため、従来の画像と比較して、メモリと帯域幅の消費量が非常に小さくなります。

以上がHTML SVGの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。