通过翻转 X 轴改变坐标系（从右上角开始）

Question

我正在寻找一种使给定 svg 元素中的坐标系从右上角而不是左上角开始的简单方法。这意味着 X 轴被翻转，因此增加元素的 x 属性会使其进一步向左呈现，而增加 y 属性会像往常一样将其进一步呈现在底部。

我玩过 scale 和 viewBox，但是：

scale 几乎解决了问题，但它对我的用例不起作用，因为它还会翻转我呈现的文本
viewBox 似乎不适用于 height="100%" 和 width="100%"。对于我的用例，我认为我无法对 SVG 的 height 和 width 进行硬编码，因为我需要它在许多不同的分辨率和屏幕尺寸下都可用。

这个 question 说它通过 matrix 转换解决了 Y 轴的相同问题。我环顾四周并试图计算 X 轴的等效值，但没有成功。

这是我正在努力实现的示例：

<svg style="border: 1px black solid;" height="100%" width="100%">
  <g>
    <g>
      <rect fill="#F0BC40" width="70" height="12" x="0" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="35" y="29">7</text>
    </g>
    <g>
      <rect fill="orange" width="50" height="12" x="72" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="97" y="29">5</text>
    </g>
    <g>
      <rect fill="orange" width="40" height="12" x="124" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="144" y="29">4</text>
    </g>
    <g>
      <rect fill="red" width="50" height="12" x="166" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="191" y="29">5</text>
    </g>
      <rect fill="#52575E" width="2" height="16" x="70" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="122" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="164" y="28"></rect>
    </g>
  </svg>

如您所见，我希望从右侧呈现这个堆叠条，红色条在最左边（因此堆叠条基本上会翻转）

我也在 Elm 中这样做，所以我无法访问 DOM 来检查元素的宽度、高度或坐标（我正在以函数方式计算所有内容）。

如果有人能帮助我实现这一目标，我将不胜感激。

Answer 1

我的想法是从 x="0" 向左绘制条形，然后将 viewBox 设置为负 x 值和宽度，使其在 x="0" 处结束。

对于文本元素，将负号添加到 x 值。对于矩形，将 x 值设置为 x -> -x - width.

定义一个 viewBox，使最小的 x 值仍在内部，或任何合适的值。

<svg style="border: 1px black solid;" height="100%" width="100%" viewBox="-500 0 500 100">
  <g>
    <g>
      <rect fill="#F0BC40" width="70" height="12" x="-70" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-35" y="29">7</text>
    </g>
    <g>
      <rect fill="orange" width="50" height="12" x="-122" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-97" y="29">5</text>
    </g>
    <g>
      <rect fill="orange" width="40" height="12" x="-164" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-144" y="29">4</text>
    </g>
    <g>
      <rect fill="red" width="50" height="12" x="-216" y="30"></rect>
      <text fill="black" font-size="10px" text-anchor="middle" x="-191" y="29">5</text>
    </g>
    <rect fill="#52575E" width="2" height="16" x="-72" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="-124" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="-166" y="28"></rect>
  </g>
</svg>

这将缩放文本和条形；如果你需要避免这种情况，有一个技巧。您可以用两个 <svg> 元素包围内容，并使用内部元素将所有内容 100% 向右移动。 overflow="visible"（或style="overflow:visible"）确保内容可见，尽管它正式位于内部 <svg>.

的视口之外

<svg style="border: 1px black solid;" height="100%" width="100%">
  <svg x="100%" overflow="visible">
    <g>
      <g>
        <rect fill="#F0BC40" width="70" height="12" x="-70" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-35" y="29">7</text>
      </g>
      <g>
        <rect fill="orange" width="50" height="12" x="-122" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-97" y="29">5</text>
      </g>
      <g>
        <rect fill="orange" width="40" height="12" x="-164" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-144" y="29">4</text>
      </g>
      <g>
        <rect fill="red" width="50" height="12" x="-216" y="30"></rect>
        <text fill="black" font-size="10px" text-anchor="middle" x="-191" y="29">5</text>
      </g>
      <rect fill="#52575E" width="2" height="16" x="-72" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="-124" y="28"></rect>
      <rect fill="#52575E" width="2" height="16" x="-166" y="28"></rect>
    </g>
  </svg>
</svg>

Answer 2

如你所说，scale "almost works"。您可以再次使用 scale 来取消翻转 text。使用嵌套变换使翻转 style 与水平 text 放置正常工作。如果你想切换回未翻转的版本，只需将 scale 中的 -1 更改为 1（或者去掉翻转 style 中的 transform）。

<head>
  <style TYPE="text/css">
  <!--
  .flipped {
    transform: scale(-1,1);
  }
  -->
  </style> 
</head>
<svg class=flipped style="border: 1px black solid;" height="100%" width="100%">
  <g>
    <g>
      <rect fill="#F0BC40" width="70" height="12" x="0" y="30"></rect>
      <g transform="translate(35,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >7</text>
        </g>
      </g>
    </g>
    <g>
      <rect fill="orange" width="50" height="12" x="72" y="30"></rect>
      <g transform="translate(97,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >5</text>
        </g>
      </g>
    </g>
    <g>
      <rect fill="orange" width="40" height="12" x="124" y="30"></rect>
      <g transform="translate(144,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >4</text>
        </g>
      </g>
    </g>
    <g>
      <rect fill="red" width="50" height="12" x="166" y="30"></rect>
      <g transform="translate(191,29)">
        <g class=flipped >
          <text fill="black" font-size="10px" text-anchor="middle" >5</text>
        </g>
      </g>
    </g>
    <rect fill="#52575E" width="2" height="16" x="70" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="122" y="28"></rect>
    <rect fill="#52575E" width="2" height="16" x="164" y="28"></rect>
  </g>
</svg>

通过翻转 X 轴改变坐标系（从右上角开始）

Alter coordinates system by flipping X axis (start at top right corner)

graphics

svg

coordinate-systems

coordinate-transformation

elm