Есть ли способ сохранить фиксированное соотношение сторон для текста, но не для других элементов 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>