有没有办法保持文本的宽高比固定，但其他 svg 元素不固定？

Question

我有一个由矩形组成的 d3.js 图表，我希望它可以调整大小以适应任何纵横比。 我通过添加以下代码来完成这项工作：

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

但我遇到的问题是我不希望文本随之拉伸。 我实际上希望文本保持恒定大小，而其位置调整以随着图表的尺寸移动。 但如果文本不能保持恒定大小，我希望它至少保留其纵横比。

我尝试在文本元素上设置宽高比，但这不起作用（我认为这是用于 viewBox 的属性）。

    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>