svgにhtmlを組み込んで、テキストを折り返したりcanvasを使ったり

svgのみでウェブページを作りたいを考えて、canvasを入れたいと思いまして調べてみました。
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_13.htm

やり方はforeignObjectを使うです。

foreignObject内にhtml要素を記述します。
注意すべきこととしてはxmlnsを指定しないと、表示されなかったりします。
foreignObject自体のxmlnsはsvg上であるため、面倒でもそれぞれのhtml要素のxmlnsをxhtmlにしなければなりません。
親オブジェクトが子オブジェクトのxmlnsを一括指定できる方法があればある程度楽なのですが…
xmlnsが指定できれば良いので、svgタグ属性でxmlns:xhtmlとかして<xhtml:canvas></xhtml:canvas>とかもしようと思えばできます。

<?xml version="1.0" charset="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="300" height="300" x="0" y="0">
        <div xmlns="http://www.w3.org/1999/xhtml">
            折り返しさせたい文章折り返しさせたい文章折り返しさせたい文章折り返しさせたい文章折り返しさせたい文章折り返しさせたい文章
        </div>
        <canvas id="canvas" xmlns="http://www.w3.org/1999/xhtml"></canvas>
    </foreignObject>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#FAA";
        ctx.fillRect(10,10,100,100);
    </script>
</svg>

これを表示すると

となり、きちんとdivやcanvasが使えていることがわかります。
残念ながらforeignObjectはchromeやfirefoxではサポートされていますがIEではサポートされてません。。。
本採用というのはちょっとつらいかもしれません。
https://developer.mozilla.org/ja/docs/Web/SVG/Element/foreignObject#Browser_compatibility

ともあれsvgの可能性が広がってcanvasの融合とかができるので楽しいです…ふふふ…