※思い出すたびに更新します．
ってなんか多すぎくね？ （いやいや，よくやっちまうんだーこれが・・・）
- とりあえず問題があるけれど，どこに問題があるのか判らない．
手書きsvg最大の敵にして，ハマるとずるずると時間ばかり過ぎていく危険な状態．しかも頻発する（経験上）．
ちょっと実装を急ぎすぎているので．一旦インラインsvgをスタンドアロンのsvgに書き換えてエラーチェックしてみよう．
- インラインsvgに慣れて大文字小文字の区別をせずにコードを記述している．
そしてスタンドアロンのsvgを記述する際にハマる．面倒でも，正しい要素名・属性名を記述する癖をつけよう．
- スタンドアロンsvgでscript要素やstyle要素がエラーを吐く．
<![CDATA[〜]]>で囲むのが作法．htmlに慣れているとよく忘れる．
- defs要素をdef要素と書いてしまう．
一部のブラウザでのみ定義した要素を参照できないケースはこれを疑いたい．特にchromeのみ表示されない場合．
- xlinkの名前空間を指定し忘れる．
エラーが発生するケース．インラインsvgでは必要ないので，時たまスタンドアロンのsvgを作る際にハマる場合がある．
- スクリプトでxlink:href属性に値を設定する際，setAttributeメソッドを使ってしまう．
デバッガ上でも問題を発見できず，かなり泣きたくなるパターン．setAttributeNSメソッドを使うのが正しい．もしくはhrefプロパティを直接操作するのがお勧め．
- その際更にxlinkの名前空間を指定すべきところをsvgの名前空間を指定してしまう．
setAttributeNSメソッドを使うことだけを憶えているとこっちの罠にはまる．
- スクリプトで要素を追加する際，createElementメソッドを使ってしまう．
同上，正しく実装できているように見えて動作しない．
createElementNSメソッドを使おう．
- clipPath要素，clip-path属性．
時々混乱する．
- xlink:href属性の「xlink:」を書き忘れる．
正しくhref属性って書いてるのにー上手く動かないーって時はだいたいこれ．
- image要素の画像参照先をsrc属性で指定する．
htmlのimg要素だったらそれでいいんだけれど．
- script要素の画像参照先をsrc属性で指定する．
htmlのscript要素だったらそれでいいんだけれど．
- スタンドアロンのsvgで外部スタイルシートを参照する際にlink要素が存在しないことに悩む．
xml-stylesheet処理命令を使って指定する．
- スクリプトで全てを賄おうとしてコードがスパゲティ化する．
canvas要素に慣れている人がいきなりsvgを触るとこのパターンに陥る．
svgでは優秀なdom機構を備えているので，予め静的なテンプレートを定義しておくとか，cssによるスタイル指定を駆使することで，劇的にスクリプトコードの品質が改善する．
d3.js等のライブラリを使う場合にも有効．
- img要素では使える機能に制限がある．
外部ファイルの参照とか，スクリプトとか．ダイナミックにsvgを構成したければobject要素一択．
- animateTransform要素にmatrix関数を渡したが動作しない．
残念ながら対象外．
- clipPath要素をdefs要素で囲み忘れてsafariで不具合をだす．
むき出しのclipPath要素の場合，safariでのみdom展開に不具合があり正しい動作とならなくなる．
clipPath要素は必ずdefs要素で囲むこと．
- インラインsvgでタグ記述を間違える．
複数のsvg要素を設定していた場合に表示がおかしくなるケースがある．「/>」を正しく記述する癖をつけよう．特にchromeで発生．
- fill属性等からlinearGradient要素を参照する際にurl関数を付け忘れる．
正しく設定しているつもりなのに塗りが正しく行われない場合はurl関数を確認したい．
- インラインsvg内部の要素にcssからtransformを指定した．
この場合，svg要素にhtmlのcss transformを掛けていることとなり，動作するかどうかはブラウザの実装依存となる．css animationと組み合わせたくなるところだが，これは標準的な動作ではないため控えたほうが良い．
→svg2ではcssからtransformを掛けられるようになります．ブラウザベンダによる先行実装なのでご利用は計画的に．
- image要素からサイズ指定のないsvg画像を読み込んだ．
この場合preserveAspectRatio属性の動作がまったく効かなくなる．
- svgフォントや図形のテンプレートを定義したsvgファイルを削除された．
少なくとも一つスクリーンに表示される要素を設定し，意味のあるsvgファイルであることを明示しよう．さもないと初心者が空のファイルと勘違いするケースがある．
- ieはバージョン9以降でのみsvgを表示可能．android os標準ブラウザは3から．
結構忘れがち．
- インラインsvgの描画内容がie9/10で飛び出てしまう．なんで？
overflow:hiddenを指定することで他のブラウザと同じ動作となる．
実はこちらのほうがw3c仕様に即した動作だったりする．やるな！ms.
- svgフォントはoperaとwebkit系でのみ動作する．
ie，firefoxは未サポート．
- smilアニメーションはieで動作しない．
なので，クロスブラウザ環境では利用不可と考えて間違いない．
- ieはuse要素による外部ファイルの参照が出来ない．
かなり致命的なので，設計時によくよく注意しておく必要がある．
- インラインsvgでhtmlのa要素とsvgのa要素とは@namespace規則で識別できる．
同名の要素があるので，場合によりハマる可能性がある．
- 外部javascriptファイルを参照する際，文字コードはutf-8とする．
現状スタンドアロンのsvgにおいて文字コードを指定する術は見つかっていない．cssなら@charset規則を使えば良いはず．
- display:noneにより機能が失われる要素（linearGradient,filter等）がある．
ieでは正常に動作するので注意．
- chromeではアニメーションイベントの実装が甘い．
繰り返し処理にendイベントやbeginイベントを使った場合に正しく動作しない場合がある．
- アニメーションをしている図形要素をuse要素でコピーする場合は必ずanimate要素を図形要素の子要素として記述する．
xlink:href属性からアニメーション対象を指定するとfirefoxで動作しない．
- style要素を含んだ外部svgファイルのsvg要素全体（もしくはg要素）をuse要素から参照してはならない．
外部ファイルのstyle要素が親svgに悪影響を及ぼす場合がある．
- 色：transparentはoperaで黒と判定される場合がある．
rgba(0,0,0,0)を指定する．
- fill="none"はマウスイベントの発生に影響を及ぼす．
色を塗らずにイベントのみを発生させるには，透明色で塗りつぶすかpointerEvents属性を使ってイベントの発生を制御する．
- text要素の機能はブラウザ毎にバラバラ．
従って確実に動作させるのであれば1文字毎に位置を指定するようにする．
- text要素での自動改行は出来ない．
出来ないったら出来ない．
- feImage要素はfirefoxで文書内の要素を参照できない．
外部参照とするのが最も手っ取り早いが…
- mask,filter要素にx,y,width,height属性を指定し忘れる．
面倒だが値を指定したほうが無難．複雑な記述をした際，処理の基準が狂う場合がある．
- svg1.2 tinyはoperaでのみ動作．
ネット上に転がっているサンプルはバージョンを確認（1.1seが良い）
- svg2をサポートするブラウザなんて存在しない．
仕様すら決まっていないのにグラデーションメッシュなんて使えるわけがない．
- foreginObject要素は極力使わない．
動作がブラウザ毎にバラバラ．制御できると考えるのは早計．
- chromeでは長さ0の点線は存在しない事になっている．
その為stroke-linecap属性を使う場合，丸い点線を引く際にちょっぴり長さを指定する必要がある．
- パス文字列の先頭のmは絶対位置指定と同等の意味．
スクリプトを記述する場合の注意点．
- スクリプトで触らない方が良い要素がある．
svgフォントとか．
- svgはinkscape専用のファイル形式と思い込む．
そんなことはなくて様々な用途に利用できる．．
- ieが互換モードになっていてsvgの表示が出来ない．
他のブラウザで表示できるのにieだけ〜の場合はこのケース．ついさっきはまったorz...
- 上手く行ったと思ったのにchromeで動かない．safariで動かない．
webkitはsvg的に地雷．動作確認を行うのであれば絶対に外してはならない．バージョン上がるたびに動かなくなるとか，どうやらwebglとか動作速度とかに目が行っていて，svgは眼中にないようだ．
投稿
0 件のコメント:
コメントを投稿