Behavior Of Flipped Coordinate System For Text Transform And Translate

The goal is to create a cartesian space that correctly displays objects and text with an inverted vertical coordinate system, so that text is not displayed upsidedown. I would like

Solution 1:

The answer is easier than what you expect. In the second case you are overriding the translate with the scale that's why it's not working:

If you want 2 transformation into the same element, you need to put them in the same transform:

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

As you can see I added both cases to demonstrate that the order is important.

Related: Why does order of transforms matter? SVG rotate/scale doesn't give the same result as scale/rotate

---

From the specification:

All document language-based styling must be translated to corresponding CSS rules and either enter the cascade at the user agent level or be treated as author level rules with a specificity of zero placed at the start of the author style sheet. A document language may define whether a presentational hint enters at the UA or author level of the cascade; if so, the UA must behave accordingly. For example, [SVG11] maps its presentation attributes into the author level

Then

Each style rule has a cascade origin, which determines where it enters the cascade. CSS defines three core origins:

Author Origin

The author specifies style sheets for a source document according to the conventions of the document language.

User Origin

The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).

User Agent Origin

Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language

Then

The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single cascaded value.

And you will find the full list of rules and you will understand why the CSS is overriding the attribute one. You will so see that at the end only one rule should be selected.