用于文本变换和翻译的翻转坐标系的行为 [英] behavior of flipped coordinate system for text transform and translate

问题描述

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

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 to not have to embed the text inside of a parent <g> element.

此代码段有效:

<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() 命令移动到 元素内，则它不起作用；文本没有被翻译到新位置:

However, if the translate() command is moved inside the <text> element, it does not work; the text does not get translated to the new position:

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

为什么?

推荐答案

答案比你想象的要容易.在第二种情况下，您使用比例覆盖¹ 翻译，这就是它不起作用的原因:

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:

如果要将 2 次转换为同一个元素，则需要将它们放在同一个转换中:

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

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

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

相关:为什么转换顺序很重要?SVG 旋转/缩放与缩放/旋转的结果不同

¹ 来自规范:

所有基于文档语言的样式都必须转换为相应的 CSS 规则，并且要么进入级联在用户代理级别，要么被视为作者级别的规则特殊性为零 放置在作者样式表的开头.文档语言可以定义表示提示是在 UA 还是在级联的作者级别输入；如果是这样，UA 必须采取相应的行动.例如，[SVG11] 将其呈现属性映射到作者级别

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

然后

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

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

作者来源

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

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

用户来源

用户可能能够为特定文档指定样式信息.例如，用户可以指定一个包含样式表的文件，或者用户代理可以提供一个界面来生成用户样式表(或表现得像它一样).

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

用户代理来源

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

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

然后

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

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.

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

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.

这篇关于用于文本变换和翻译的翻转坐标系的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！