CODEWITHSUNDEEP
javascriptcsssvg
tralifa
tralifa

Reputation: 55

How to flip SVG coordinates?

I have a bar chart with the bars going horizontal created in an SVG. How would I flip the SVG to make the bar graph vertical?

I currently have transform: 1, -1 in my CSS file but it isn't working. Any other suggestions?

Upvotes: 0

Views: 1451

Answers (2)

Andrew Willems
Andrew Willems

Reputation: 12458

The example below demonstrates one strategy you might use. In the SVG code one labeled graph is drawn 5 times:

enter image description here

  1. (untransformed original)
    • rotated 90 degrees
    • rotated 90 degrees,
    • then flipped vertically (and translated back into position)
    • rotated 90 degrees,
    • then flipped vertically (and translated back into position),
    • then with all the labels flipped vertically again to restore the orientation of each (with each label separately translated back into position)
    • rotated 90 degrees,
    • then flipped vertically (and translated back into position),
    • then with all the labels flipped vertically again to restore the orientation of each (with each label separately translated back into position),
    • then with the X label rotated 180 degrees

For each graph the outer <g> element is simply to position the five graphs next to each other and is irrelevant to understanding the graph-flip. In contrast, the inner <g> element has the transform that is critical for understanding the graph-flip.

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

Upvotes: 2

Matthew Beckman
Matthew Beckman

Reputation: 1722

You can use transform and rotate() to turn the SVG 90 degrees.

Example:

transform: rotate(90);

Note: Since you didn't provide any code, after using rotate() you may also need to move the SVG back into place by using translate().

Upvotes: 2

Related Questions