如何翻转SVG坐标？

Question

我有一个条形图，其中条形图在SVG中创建水平。如何翻转SVG以使条形图垂直？

我目前在我的CSS文件中有transform: 1, -1但它无效。还有其他建议吗？

Answer 1

您可以使用transform和rotate()将SVG旋转90度。

示例：

transform: rotate(90);

  

注意：由于您未使用rotate()提供任何代码，因此您可能还需要使用translate()将SVG移回原位。

Answer 2

以下示例演示了您可能使用的一种策略。在SVG代码中，一个标记的图形被绘制了5次：

1. （未翻译原文）
2. • 旋转90度
3. • 旋转90度，
   • 然后垂直翻转（并翻译回位置）
4. • 旋转90度，
   • 然后垂直翻转（并翻译回位置），
   • 然后再次垂直翻转所有标签以恢复每个的方向（每个标签分别翻译回位置）
5. • 旋转90度，
   • 然后垂直翻转（并翻译回位置），
   • 然后再次垂直翻转所有标签以恢复每个的方向（每个标签分别翻译回位置），
   • 然后将X标签旋转180度

对于每个图形，外部<g>元素只是将五个图形定位在彼此旁边，与理解图形翻转无关。相比之下，内部<g>元素具有对理解图形翻转至关重要的变换。

＆＃13;
＆＃13;
<svg width="600">
  <defs>
    <g id="graph" fill="none" stroke="black">
      <polyline points="20,0 20,90 110,90"/>
      <rect x="30" y="10" width="20" height="80"/>
      <rect x="70" y="40" width="20" height="50"/>
    </g>
    <g id="X_label">
      <text transform="translate(24,110)">X values</text>
    </g>
    <g id="Y_label">
      <text transform="rotate(270) translate(-86,12)">Y values</text>
    </g>
  </defs>
  <g transform="translate(0)">
    <g transform="">
      <use href="#graph"/>
      <use href="#X_label"/>
      <use href="#Y_label"/>
    </g>
  </g>
  <g transform="translate(120)">
    <g transform="rotate(90,60,60)">
      <use href="#graph"/>
      <use href="#X_label"/>
      <use href="#Y_label"/>
    </g>
  </g>
  <g transform="translate(240)">
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)">
      <use href="#graph"/>
      <use href="#X_label"/>
      <use href="#Y_label"/>
    </g>
  </g>
  <g transform="translate(360)">
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)">
      <use href="#graph"/>
      <use href="#X_label" transform="scale(-1,1) translate(-120,0)"/>
      <use href="#Y_label" transform="scale(-1,1) translate(-15,0)"/>
    </g>
  </g>
  <g transform="translate(480)">
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)">
      <use href="#graph"/>
      <use href="#X_label" transform="scale(-1,1) translate(-120,0) rotate(180,55,104)"/>
      <use href="#Y_label" transform="scale(-1,1) translate(-15,0)"/>
    </g>
  </g>
</svg>
＆＃13;
＆＃13;
＆＃13;