他のsvg要素ではなく、テキストのアスペクト比を固定する方法はありますか？

Question

私は矩形で構成されたd3.jsグラフを持っています。これを任意の縦横比にリサイズすることができます。私はこのコードを追加することによって、この作品を作りました：

var canvas = d3.select("#graph-canvas").append("svg:svg") 
     .attr("viewBox", "0 0 " + viewWidth + " " + viewHeight) 
     .attr("preserveAspectRatio", "none") 

しかし、私がいる問題は、私はテキストはそれと一緒にストレッチしたくないということです。私は実際にはテキストが一定の大きさを保つことを望み、ポジションはチャートのディメンションに合わせて調整します。しかし、テキストを一定のサイズにすることができない場合は、少なくともアスペクト比を保持することをお勧めします。

私はそれは属性がビューボックスのためのものだと思う（私はテキスト要素にアスペクト比を設定しようとしたが、これは動作しません。

canvas.append("svg:text") 
     .attr("x", function(d, i) {return xScale(i) + marginLeft;}) 
     .attr("y", "200") 
     .attr("preserveAspectRatio", "xMinYMin") 
     .attr("font-size", "100") 
     .text("foo"); 

私も普通のdivを添付しようとした

が、これはしかし正しい戦略であるかもしれない考え...彼らが現れたことがないいくつかの理由で

Answer 1

このような何か

デモ：。？http://jsfiddle.net/g8Ms6/

<svg 
    version="1.1" xmlns="http://www.w3.org/2000/svg" 
    width="100%" height="100%"> 

    <rect 
     x="10%" y="10%" 
     width="80%" height="80%" 
     stroke="black" stroke-width="1" 
     fill="transparent"/> 

    <svg 
     x="10%" y="10%" 
     width="80%" height="80%" 
     viewBox="0 0 100 100" preserveAspectRatio="none"> 

     <rect x="20" y="15" width="30" height="20" fill="blue"/> 
    </svg> 

    <text 
     x="90%" y="90%" 
     font-size="20px" fill="#000" 
     transform="translate(-50, 20)"> 
     Foo 
    </text> 
</svg>