Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG

黄舟

Jan 22, 2017 am 11:54 AM

1. SVG とは

Scalable Vector Graphics は、2 次元のベクターグラフィックスを記述するための Extensible Markup Language (Standard Universal Markup Language のサブセット) に基づくグラフィックス形式です。これは、2003 年 1 月 14 日に World Wide Web コンソーシアム SVG によって W3C 勧告になりました。

SVGは、Scalable Vector Graphicsのことです

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

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

SVG 画像を拡大またはサイズ変更したときのグラフィック品質は、損はしないでください

SVGはWorld Wide Web Consortiumの標準です

SVGはDOMなどのW3C標準と統合されており、W3C標準です。

SVG の定義に関与している組織は、Sun Microsystems、Adobe、Apple、IBM、Kodak です。

他の画像形式と比較して、SVG を使用する利点は次のとおりです:

SVG は多くのツール (メモ帳など) で読み取りおよび変更できます

JPEG や GIF 画像と比較して、SVG はサイズが小さく、圧縮率が高くなります。

SVGはスケーラブルです

SVG画像はどの解像度でも高品質で印刷できます

SVGは画質を損なうことなく拡大できます

SVG画像内のテキストはオプションで検索も可能です（地図の作成に最適です）

SVGは実行できますJava テクノロジーを使用した

SVG はオープンスタンダードです

SVG ファイルは純粋な XML です

SVG の主な競合相手は Flash です。

Flash と比較した場合、SVG の最大の利点は、他の標準 (XSL や DOM など) と互換性があることです。 Flash はオープンソースではない独自のテクノロジーです。

3. ブラウザのサポート

Internet Explorer 9、Firefox、Opera、Chrome、Safari はインライン SVG をサポートします。

4. HTML ページへの SVG の埋め込み

HTML5 では、SVG 要素を HTML ページに直接埋め込むことができます:

<!DOCTYPE html>  
<html>  
    <body>  
  
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  
            <polygon points="100,10 40,180 190,60 10,60 160,180"  
                style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />  
        </svg>  
  
    </body>  
</html>

ログイン後にコピー

5. SVG にはいくつかの事前定義された Shape があります。開発者が使用および操作できる要素:

rectangle Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG

circle

ellipse

line
ポリライン<ポリライン>
Polygon
Path

長方形の例を見てみましょう

<!DOCTYPE html>  
<html>  
    <body>  
  
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">  
            <rect x="20" y="20" width="250" height="250"  
                style="fill:blue;stroke:pink;stroke-width:5;  
                fill-opacity:0.1;stroke-opacity:0.9"/>  
        </svg>  
  
    </body>  
</html>

ログイン後にコピー

x プロパティ長方形の左の位置を定義します (たとえば、x=0 " は、四角形からブラウザウィンドウの左側までの距離が 0px であることを定義します)
y 属性は、四角形の上部の位置を定義します (たとえば、 y="0" は、四角形の上部からの距離を定義します)ブラウザウィンドウの上部の四角形は 0px)

CSS の fill-opacity 属性は、塗りつぶし色の透明度を定義します (正当な範囲は 0 ～ 1)

のストロークの不透明度属性CSS はストロークの色の透明度を定義します (有効な範囲は 0 ～ 1 です)

上で使用したのは、3 辺以上のグラフィックを作成するために使用できるタグです。

<!DOCTYPE html>  
<html>  
    <body>  
  
        <svg width="100%" height="100%" version="1.1"  
            xmlns="http://www.w3.org/2000/svg">  
  
            <polygon points="220,100 300,210 170,250"  
                style="fill:#cccccc;  
                stroke:#000000;stroke-width:1"/>  
  
        </svg>  
    </body>  
</html>

ログイン後にコピー

3 つの点の座標が上で定義され、次に線が定義されます色と塗りつぶし方法

Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG

ソースコード:

<!DOCTYPE html>  
<html>  
    <body>  
    <svg width="100%" height="100%" version="1.1"  
    xmlns="http://www.w3.org/2000/svg">  
  
        <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">   
        <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/>   
        <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>   
        <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"/>   
        <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"/>   
        <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>  
        </rect>  
  
        <g transform="translate(100,100)">   
        <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It&#39;s SVG!  
        <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>  
        <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"/>  
        <animateColor attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze"/>   
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/>   
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/>   
        </text>   
        </g>  
  
    </svg>  
  
    </body>  
</html>

ログイン後にコピー

Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG