yomotsuはまろぐ

SVGのFilterなどで行列を書くときに気をつけること

SVG の原始フィルターの <feColorMatrix> などの値は 5 * 5 の行列なので見やすくするために属性内を開業すると Webkit だとエラーになる。FxやOperaは見れる。

例えば、

<filter id="invert">
 <feColorMatrix in="SourceGraphic" result="ColorMatrix" type="matrix" values="-1, 0, 0, 0, 1 0,-1, 0, 0, 1 0, 0,-1, 0, 1 0, 0, 0, 1, 0"/>
</filter>

ならOK。

でも

<filter id="invert">
 <feColorMatrix in="SourceGraphic" result="ColorMatrix" type="matrix" values="
  -1, 0, 0, 0, 1
   0,-1, 0, 0, 1
   0, 0,-1, 0, 1
   0, 0, 0, 1, 0
  "
 />
</filter>

だとみれない。