文本变换和翻译的翻转坐标系的行为

Question

目标是创建一个笛卡尔空间，用倒置的垂直坐标系正确显示对象和文本，使文本不会倒置显示。我不想将文本嵌入到父 <g> 元素中。

这个 sn-p 有效：

<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>

如您所见，我添加了这两种情况以证明顺序很重要。

相关：Why does order of transforms matter? SVG rotate/scale doesn't give the same result as scale/rotate

---

¹来自the specification：

所有基于文档语言的样式都必须翻译成相应的 CSS 规则，并且要么进入级联在用户代理级别，要么被视为作者级别规则在作者样式表的开头放置一个零特异性。文档语言可以定义表示提示是否进入 UA 或级联的作者级别；如果是这样，UA 必须做出相应的行为。例如，[SVG11] 将其表示属性映射到作者级别

然后

每个样式规则都有一个级联起源，它决定了它进入级联的位置。 CSS 定义了三个核心来源：

作者来源

作者根据文档语言的约定为源文档指定样式表。

用户来源

用户可能能够为特定文档指定样式信息。例如，用户可以指定一个包含样式表的文件，或者用户代理可以提供一个接口来生成用户样式表（或表现得好像它确实如此）。

用户代理来源

符合标准的用户代理必须应用默认样式表（或表现得像他们一样）。用户代理的默认样式表应该以满足文档语言的一般呈现期望的方式呈现文档语言的元素

然后

级联获取给定元素上给定属性的声明值的无序列表，按照下面确定的声明优先级对它们进行排序，并输出一个单级联值。

您会找到完整的规则列表，并且您会理解为什么 CSS 会覆盖属性一。您会看到最后只应选择一条规则。