再びSVGです。今回は星を描きます。SVGに付いては前回のQUESTION 1を参照してください。
今回のソースです。埋め込み方は前回説明しましたが、変更があったので改めて後ほど説明します。
01 <?xml version="1.0" standalone="no"?>
02 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
03 <svg>
04 <title>HTML TIPS&TRICK 2000/12 QUESTION 1</title>
05 <defs>
06 <!-- styles -->
07 <style type="text/css">
08 <![CDATA[
09 polygon
10 {
11 fill:none;
12 stroke:blue;
13 stroke-width:10;
14 }
15 text
16 {
17 font-size:50px;
18 font-weight:bold;
19 color:orange;
20 }
21 ]]>
22 </style>
23 </defs>
24
25 <polygon points="150,25 223,251 31,111 269,111 77,251"/>
26 <text x="250" y="250">SVG TIPS & TRICKS</text>
27 </svg>
前回も説明したところですが、規格に変更があったために少し変わっています。SVGはまだ正式勧告されていない規格のため、これからも変更がありえます。
SVGデータのタイトルを記述するためのエレメントで、HTMLのTITLEエレメントと同じと思われます。
25行目は新しく出てきたポリゴン図形です。26行目は既に説明したテキストなので、説明は省略します。
指定されたポイントを順に直線で結びます。終了タグを省略した記述です。
直線の曲がり角に当たるポイントの座標を半角スペースで区切って列挙します。座標は x座標,y座標 の形で1セットずつ定義します。 最後のポイントと最初のポイントは直線で結ばれます。
EMBEDエレメントだけでなく、OBJECTエレメントも使って、次のようにします。 本来EMBEDエレメントは正式なHTMLでは定義されていないため、OBJECTエレメントの要素として使用します。 EMBEDエレメントしか認識できないブラウザがあるため、このような手段を使わざるを得ないのが現状です。
01 <OBJECT type="image/svg+xml" data="埋め込むSVGファイル" width="幅" height="高さ">
02 <EMBED width="幅" height="高さ" src="埋め込むSVGファイル">
03 <NOEMBED>
04 プラグインが使用できないときの記述
05 </NOEMBED>
06 </OBJECT>
3〜5行目はOBJECTエレメントもEMBEDエレメントも対応していない場合の処理です。 HTMLではブラウザが処理できないエレメントのタグは無視することになっているので、4行目の部分しか認識しません。 NOEMBEDエレメントはその内容を無視すると言うエレメントなので、このエレメントを認識できるブラウザでは表示されません。