ホームページ > 記事 > ウェブフロントエンド > Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG
Xiaoqiang の HTML5 モバイル開発への道 (17) – HTML5 インライン SVG
- 黄舟オリジナル
- 2017-01-22 11:54:331308ブラウズ
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 です。
Internet Explorer 9、Firefox、Opera、Chrome、Safari はインライン SVG をサポートします。
4. HTML ページへの SVG の埋め込み<!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
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 つの点の座標が上で定義され、次に線が定義されます 色と塗りつぶし方法 - 6. 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'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>
