SVGをReact.js/JSXで使う
この記事はSVG Advent Calendar 2016の19日目です。
去年に引き続きグラフを描いての参加です。
React × SVG
React.jsなプロジェクトでSVGを描画したときのメモです。
React.jsでは、JSXという記法でJavaScriptコード内にHTMLタグを記述していきますが、SVGタグも記述できます。
React.jsの特徴は仮想DOMですが、SVGもSVG DOMというインターフェースを持っているので、HTML同様にサポートされているのですね。
Attributeはキャメルケースを基本に
まずタグ内の属性名については、基本的にハイフンがキャメルケースになります。ネームスペースを表すコロンも同様です。
通常のSVG
<svg version="1.1" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100" x="10" y="10" fill="#900" stroke="#666" stroke-width="5" /> <a xlink:href="http://blog.hatena.ne.jp/yuw27b/"> <text x="20" y="40" fill="#FFF" text-anchor="start" font-size="20">Text</text> </a> </svg>
JSX内のSVG
<svg version="1.1" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100" x="10" y="10" fill="#900" stroke="#666" strokeWidth="5" /> <a xlinkHref="http://blog.hatena.ne.jp/yuw27b/"> <text x="20" y="40" fill="#FFF" textAnchor="start" fontSize="20">Text</text> </a> </svg>
JSXはあくまでもJavaScriptの中なので、ハイフンやコロンが使えないからだと思われます。
サポートされている属性名のリストは以下の公式ページの最下部にあります。
https://facebook.github.io/react/docs/dom-elements.html
上記のリストには含まれていないのですが(HTMLと同じだから?)、「class」も「className」になります。
ブラウザにReactのDeveloper Toolsを入れておけば、使用できない属性名についてはコンソールに警告が出るので、まずはそのままSVGを書いてしまって、エラーが出たら都度修正、でもいいと思います。
または、自動的に変換してくれるnpmパッケージと、それを元にしたオンラインサービスもあります。
svg-to-jsx
SVG to JSX Online Converter
ただし、若干バグがあるような感じなので、全部お任せはちょっと難しいかもしれません。