поведение перевернутой системы координат для преобразования и преобразования текста

Question

Цель состоит в том, чтобы создать декартово пространство, которое правильно отображает объекты и текст с помощью перевернутой вертикальной системы координат, чтобы текст не отображался сверху вниз.Я не хотел бы вставлять текст внутри родительского элемента <g>.

Этот фрагмент кода работает:

<style>
svg.cartesian { transform: scaleY(-1); }
svg.cartesian text { transform: scaleY(-1); }
</style>
<svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
<path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<circle cx=20 cy=20 r=1 />
<g transform="translate(20, 20)">
<text>(20, 20)</text>
</g>
</svg>

Однако, если команда translate() перемещена внутри элемента <text>, она не работает;текст не переводится на новую должность:

<style>
svg.cartesian { transform: scaleY(-1); }
svg.cartesian text { transform: scaleY(-1); }
</style>
<svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
<path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<circle cx=20 cy=20 r=1 />
<text transform="translate(20, 20)">(20, 20)</text>
</svg>

Почему?

Answer 1

Ответ проще, чем вы ожидаете. Во втором случае вы переопределяете ¹ перевод с использованием шкалы, поэтому он не работает:

Если вы хотите 2 преобразования в один и тот же элемент, вам нужно поместить их в одно и то же преобразование:

<style>
svg.cartesian { transform: scaleY(-1); }
</style>
<svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
<path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
<circle cx=20 cy=20 r=1 />
<text transform="translate(20, 20) scale(1,-1)">(20, 20)</text>
<text transform="scale(1,-1) translate(20, 20)">(20, 20)</text>
</svg>

Как видите, я добавил оба случая, чтобы продемонстрировать, что порядок важен.

Похожие: Почему порядок преобразований имеет значение? SVG rotate / scale не дает тот же результат, что и scale / rotate

---

¹ С Спецификация :

Все стили, основанные на языке документа, должны быть переведены в соответствующие правила CSS и либо ввести каскад на уровне агента пользователя , либо рассматриваться как правила уровня автора с Специфичность ноль помещена в начало таблицы стилей автора. Язык документа может определять, вводится ли презентационная подсказка на UA или на уровне автора каскада; если так, то UA должен вести себя соответственно. Например, [SVG11] отображает свои атрибуты представления на уровень автора

Тогда

Каждое правило стиля имеет каскадное происхождение, которое определяет, куда оно входит в каскад. CSS определяет три основных источника:

Автор Происхождение

Автор определяет таблицы стилей для исходного документа в соответствии с соглашениями языка документа.

Происхождение пользователя

Пользователь может указывать информацию о стиле для конкретного документа. Например, пользователь может указать файл, который содержит таблицу стилей, или пользовательский агент может предоставить интерфейс, который генерирует таблицу стилей пользователя (или ведет себя так, как если бы он это делал).

Пользовательский агент Origin

Соответствующие пользовательские агенты должны применять таблицу стилей по умолчанию (или вести себя так, как будто они это сделали). Таблица стилей агента пользователя по умолчанию должна представлять элементы языка документа так, чтобы они соответствовали общим ожиданиям при представлении языка документа

Тогда

Каскад принимает неупорядоченный список объявленных значений для данного свойства данного элемента, сортирует их по приоритету их объявления, как определено ниже , и выдает single каскадное значение .

И вы найдете полный список правил и поймете, почему CSS переопределяет атрибут. Вы увидите, что в конце следует выбрать только одно правило .