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

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>

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

相关：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为什么覆盖属性1的原因。您将看到，最后只应选择一个规则。