Есть ли способ надежного поворота текста SVG в пределах изменяемого размера графики?

Question

Я строю SVG, который отображает довольно стандартный график XY с метками осей.Мне бы хотелось, чтобы метка оси Y (слева от графика) отображалась вертикально, а весь текст поворачивался на 90 градусов.Например, для графика velocity / time, ось Y будет «Velocity» с V, показанным вверху графика, и «y» внизу.

Мой SVG - этопостроить со всеми размерами и расстояниями, вычисленными в %, например, строка может быть отображена следующим образом:

<line x1="5%" y1="8%" x2="10%" y2="6%" />

Это было сделано для того, чтобы рисунок был «изменен», чтобы заполнить любое пространство, данное емуприложением, веб-страницей и т. д.

Я знаю, как вращать текст (transform="rotate(Θ, cx, cy)"), но это не работает с процентами для значений cx и cy.Я попытался обернуть текст в <g> и повернуть его (аналогично <svg>), но система координат, кажется, унаследована от родителя, поэтому я не могу вращаться вокруг «источника» <g> или <svg> и затем поместите последний элемент относительно внешней системы координат (по крайней мере, я не понял, как).

Учитывая, что я использую проценты для всего, есть ли способ повернуть текст так, как я хотел бы?

Answer 1

Как первое примечание, преобразования не наследуют, а определяют новую систему координат для элемента и всех его дочерних элементов.Это может выглядеть как семантическая деталь, но чтобы понять SVG, вам нужно подумать о терминах текущих систем координат и их трансформации, в противном случае большие части спецификации могут показаться запутанными.

Преобразования с transform attribute и CSS-преобразования на данный момент не совместимы.Функция SVG rotate() не может надежно принимать кросс-браузерные идентификаторы единиц измерения, а функция CSS rotate() не имеет параметров для центра вращения, но может использовать свойство transform-origin.Следовательно, есть два решения для вашей проблемы.Оба описываются с привязкой текста как центр вращения

Способ CSS

transform-origin - это свойство CSS, которое принимает список из двух длин для описания центра вращения.По умолчанию центр вращения является центром повернутого объекта.Для текстового содержимого это может создать некоторую неопределенность относительно того, где находится вертикальный центр.Лучше определить явное transform-box:view-box и снова использовать атрибуты позиционирования.

line {
    stroke: red;
}

text {
    font-family: sans-serif;
    font-size: 15px;
}

.cross {
    transform: rotate(90deg);
    transform-origin: 20% 20%;
    transform-box: view-box;
}

<svg width="200" height="150">
    <line x1="20%" x2="20%" y1="0" y2="100%" />
    <line x1="0" x2="100%" y1="20%" y2="20%" />
    <text class="along" x="20%" y="20%">label</text>
    <text class="cross" x="20%" y="20%">label</text>
</svg>

Обратите внимание, что IE / Edge не поддерживают этот синтаксис.

Способ SVG

SVG поддерживает второй механизм, который приводит к новой системе координат: определение нового окна просмотра.Для этого вам нужно вложить элемент <svg>.Хотя в настоящее время определение атрибута transform для элемента <svg> не поддерживается полностью, вы можете установить новые атрибуты x и y для эффективного выполнения перевода.

Таким образом, вы можете сначала расположитьваш текст в начале локальной системы координат, поверните его на месте, и только затем переместите его на новую позицию с длиной в процентах.

line {
    stroke: red;
}

text {
    font-family: sans-serif;
    font-size: 15px;
}

svg svg {
    overflow: visible;
}

<svg width="200" height="150">
    <line x1="20%" x2="20%" y1="0" y2="100%" />
    <line x1="0" x2="100%" y1="20%" y2="20%" />
    <text class="along" x="20%" y="20%">label</text>
    <svg x="20%" y="20%">
        <!-- x, y and transform center all default to 0 -->
        <text class="cross" transform="rotate(90)">label</text>
    </svg>
</svg>

Вам нужно установить overflow:visible на внутреннем svg, чтобы контент, который заканчивается за пределами нового окна просмотра, все еще был виден.(В приведенном выше примере это не так, но если вы используете, например, text-anchor:middle, метка будет начинаться с отрицательного значения y.