Поворот HTML SVG-текста на 270 градусов

Question

Я изо всех сил пытаюсь понять, как вращение текста работает с текстовыми тегами HTML-тегов Html.

Я прочитал это, несколько, аналогичный вопрос rotate x axis text in d3, но ответ на самом деле не кажется применимым - что я могу фигурировать в любом случае.

Возьмите следующий SVG Разметка:

<svg> 
    <g> 
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
    <text x="2" y="73" font-size="10">1</text> 
    </g> 
    <g> 
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
    <text x="22" y="73" font-size="10">2</text> 
    </g> 
    <g> 
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
    <text x="42" y="73" font-size="10">3</text> 
    <!-- Trying to rotate this 270 degrees --> 
    <text x="42" y="73" font-size="10">Missing</text> 
    </g> 
    <g> 
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
    <text x="62" y="73" font-size="10">4</text> 
    </g> 
</svg> 

Существует некоторый текст, в 3-й группе; 'Missing'

Я пытаюсь повернуть этот 270 градусов, но изо всех сил стараюсь понять, с чего он вращается. Я прочитал, что он вращается от источника, но каково происхождение в этом?

Я пробовал такие вещи, как transform="rotate(270, 42, 73)" и другие другие номера вместо 42 и 73. Я могу в конечном итоге с догадкой получить его в правильном положении, хотя и не понимая, как это работает, тогда я не могу добавить текст к другим группам и поверните его.

Итак, как мне повернуть это и, в условиях мирян, как это работает?

Для осветления - Ищу достичь:

Answer 1

Это кажется примерно соответствует рисунок. По умолчанию начало вращения слева внизу.

<svg> 
 
    <g> 
 
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="2" y="73" font-size="10">1</text> 
 
    </g> 
 
    <g> 
 
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="22" y="73" font-size="10">2</text> 
 
    </g> 
 
    <g> 
 
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="42" y="73" font-size="10">3</text> 
 
    <!-- Trying to rotate this 270 degrees --> 
 
    <text transform="rotate(270, 42, 73) translate(10,10)" x="42" y="73" font-size="10">Missing</text> 
 
    </g> 
 
    <g> 
 
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="62" y="73" font-size="10">4</text> 
 
    </g> 
 
</svg>

Answer 2

Текст позиционируется с базовым началом в точке с координатами, которые Вы предоставляете. В вашем примере вы позиционируете «3» и «Missing» в том же положении. Попытка найти правильные значения для преобразования, которые будут вращать текст в позиции оттуда, излишне усложняет процесс.

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

Первый шаг: поместить текст

<svg width="200" viewBox="0 0 100 100"> 
 
    <g> 
 
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="2" y="73" font-size="10">1</text> 
 
    </g> 
 
    <g> 
 
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="22" y="73" font-size="10">2</text> 
 
    </g> 
 
    <g> 
 
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="42" y="73" font-size="10">3</text> 
 
    <!-- Trying to rotate this 270 degrees --> 
 
    <text x="52" y="63" font-size="10">Missing</text> 
 
    </g> 
 
    <g> 
 
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="62" y="73" font-size="10">4</text> 
 
    </g> 
 
</svg>

Второй шаг: Теперь поверните

(52,63) выглядит примерно правильно. Теперь мы можем повторно использовать эти координаты для rotate().

<svg width="200" viewBox="0 0 100 100"> 
 
    <g> 
 
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="2" y="73" font-size="10">1</text> 
 
    </g> 
 
    <g> 
 
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="22" y="73" font-size="10">2</text> 
 
    </g> 
 
    <g> 
 
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="42" y="73" font-size="10">3</text> 
 
    <!-- Trying to rotate this 270 degrees --> 
 
    <text x="52" y="63" font-size="10" transform="rotate(270 52 63)">Missing</text> 
 
    </g> 
 
    <g> 
 
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect> 
 
    <text x="62" y="73" font-size="10">4</text> 
 
    <text x="72" y="63" font-size="10" transform="rotate(270 72 63)">Missing</text> 
 
    </g> 
 
</svg>

В конечном счете, решение Роберта проще, но я хотел, чтобы помочь вам понять, как поворот преобразования работы с текстом.