svgにおけるjavascript覚書

単なる自分用の覚書．HTMLにおけるスクリプティングに近く，それほど違和感は感じられないが，細かい部分で引っかかる．下記の注意点を抑えておけば基本的なプログラミングは可能か？
随時更新中．

• htmlにおいてsvg要素を取得するとSVGElementが返される．よって通常のHTMLElementをベースとしたプログラミングは不可．
• 要素の取得→document.getElementById，document.getElementsByTagName等．おそらくHTMLと同じ．
• 要素の生成→document.createElementNS("http://www.w3.org/2000/svg", "circle")
  ※http://www.w3.org/2000/svgはsvg要素の名前空間．
  createElementはHTML要素用．さもないとappendChildした際に上手く行かない．
• プロパティの設定にはsetAttributeを用いる．
• style要素，script要素，text要素の内部にアクセスする→textContentプロパティを参照する．
  
• htmlElement.innerHTMLに相当するものは見つからなかった．
  なお，HTML内のsvg要素であれば，外部のHTML要素からinnerHTMLを取得することでsvg要素の構造をテキストとして取得することは可能．
• HTMLのdocuemnt.bodyに相当するものはdocument.documentElement
• childNodes…テキストを含んだ子要素
  children…svg子要素
• スクリプトの実行タイミングはscript要素を読み込んだ時．（HTMLと同じ）
• ルートとなるsvg要素のonload属性に処理開始のスクリプトを記述する．
  svgファイルではwindow.onloadに処理開始のスクリプトを記述する．
• htmlのbackground-image及びimg要素に設定されたsvgではjavascriptが実行されない．
  ブラウザで直接svgを開いた場合とiframe内で開いた場合にのみ実行される．
• （ブラウザにおいては）alert関数は利用可能．
• scriptの外部参照は可能．<script xlink:href="参照先"/>
• スタイルの外部参照はsvgファイルのxml宣言の直後に
  <?xml-stylesheet href="clock.css" type="text/css"?>
  を記述する．一般的なxmlファイルでのスタイルシート指定に従う．
  なお，html内部のsvg要素であれば，htmlのスタイルシート指定（link等）で可能．
• アニメーション処理を行う場合は，（１）animate要素を用いる（２）スクリプトによるの2種類が考えられる．animate要素を上手く使えばスクリプトの記述量が大幅に減る．
• html内のsvg要素とsvgファイルにおけるsvg要素の振る舞いには若干異なる点が存在する．
  svgファイルでは構文が厳密に解釈されるため，問題点が存在した際にエラーとなるが，html内のsvg要素ではブラウザが勝手に構文を解釈してしまう．
  よって，構文エラーによる不具合の抽出を容易とするため，スクリプティング作業はsvgファイルで行い，検証がとれた後にhtmlファイルに埋め込むようにすると良い．
• ブラウザ上でjavascriptを含んだsvgファイルを展開した場合，windowオブジェクトのdocumentプロパティにsvgElementオブジェクトが設定される．おそらくその他のプロパティは一般的なHTML+javascript時と同じ．window.locationも問題なく取得できた．
• jQuery等のフレームワークはほぼ動かないものとして対処する．htmlとsvgの境界となるsvg要素の取扱いに注意が必要．（どうなるか判らない）
• text要素の中身を設定する方法としては次の2つの方法がある．
  • document.createTextNode("任意の文字列")を使ってテキストノードを生成し，そのあとでtext要素にappendChildする．
  • textContentプロパティを操作する．
  値の参照・更新が可能な点からtextContentのほうが使いやすい．
• svgElmentはsetAttribute，getAttributeで大体の操作が可能だが，書くエレメントオブジェクトの種類ごとに専用のメソッドが提供されているので，場合によってはこれらのメソッドを利用したほうがコードの見通しが良くなるかもしれない．（但しそのメソッドが分かりやすいかどうかは別問題．）
  例）path要素→https://developer.mozilla.org/en/DOM/SVGPathElement
  createSVGPathSegCurvetoQuadraticSmoothAbs…41文字のメソッドか．もう少し何とかならなかったんじゃろか？