Как перевернуть координаты SVG?

Question

У меня есть гистограмма с барами, идущими горизонтальный, созданный в SVG. Как бы я перевернул SVG, чтобы сделать гистограмму вертикальной?

В настоящее время у меня transform: 1, -1 в моем файле CSS, но он не работает. Любые другие предложения?

Answer 1

Приведенный ниже пример демонстрирует одну стратегию, которую вы можете использовать. В коде SVG один помеченный граф обращается 5 раз:

1. (нетрансформированный оригинал)
2. • поворачивается на 90 градусов
3. • поворачивается на 90 градусов ,
   • затем переворачивается вертикально (и переведены в исходное положение)
4. • поворачивается на 90 градусов,
   • затем перевернуть вертикально (и переведены в исходное положение),
   • затем со всеми этикетки перевернуты вертикально снова, чтобы восстановить ориентацию каждого (с каждой этикеткой, переведенной отдельно в нужное положение)
5. • поворачивается на 90 градусов,
   • затем перевернуть вертикально (и переведены в исходное положение),
   • затем все метки вертикально снова перевернуть, чтобы восстановить ориентацию каждого (с каждой метки в отдельности переведены в исходное положение),
   • затем с меткой X повернуты на 180 градусов

Для каждого графика внешний элемент <g> представляет собой просто расположение пяти графиков рядом друг с другом и не имеет отношения к пониманию графика.Напротив, внутренний элемент <g> имеет преобразование, которое имеет решающее значение для понимания графика.

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

Answer 2

Вы можете использовать transform и rotate(), чтобы превратить SVG на 90 градусов.

Пример:

transform: rotate(90); 

Примечание: Поскольку вы не предоставили никакого кода, после использования rotate() вам может понадобиться, чтобы переместить SVG обратно на место с помощью translate().