SVG бок о бок - повернуть все на 90

У меня есть 2 SVG (горизонтальный вид):

<svg id="svgC1" height="52.215796" width="257.597148" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,6.326886 178.017424,6.326886 178.017424,45.888910 0,45.888910" fill="green"></polyline>
    <polyline points="178.017424,7.892542 257.597148,7.892542 257.597148,44.323254 178.017424,44.323254" fill="blue"></polyline>
</svg>
<svg id="svgC2" height="52.215796" width="257.597148" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,6.326886 178.017424,6.326886 178.017424,45.888910 0,45.888910" fill="blue"></polyline>
    <polyline points="178.017424,7.892542 257.597148,7.892542 257.597148,44.323254 178.017424,44.323254" fill="green"></polyline>
</svg>

пример jsfiddle

Я попытался сгруппировать полилинии, а затем применить преобразование, повернуть на 90, но я всегда «теряю» изображения, так как основной svg широкий и узкий.

Как проще всего повернуть их на 90 градусов и разместить рядом (вертикальный вид)?


javascript svg html
person Dryadwoods    schedule 05.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы хотите повернуть каждое изображение вокруг точки рядом с левым краем, чтобы они стали вертикальными слева от нового объекта. Итак, поскольку высота SVG составляет 252,125, вы бы выбрали точку вращения примерно 26,17.

Самый простой способ сделать это — добавить групповой элемент, окружающий полилинии, и добавить к нему преобразование.

  <g transform="rotate(90,26.17,26.17)">
    <polyline points="0,6.326886 178.017424,6.326886 178.017424,45.888910 0,45.888910" fill="green"></polyline>
    <polyline points="178.017424,7.892542 257.597148,7.892542 257.597148,44.323254 178.017424,44.323254" fill="blue"></polyline>
  </g>

Затем переключите SVG с «пейзажного» на «портретный», переключая ширину и высоту для каждого.

<svg id="svgC1" width="52.215796" height="257.597148" xmlns="http://www.w3.org/2000/svg">
  <g transform="rotate(90,26.17,26.17)">
    <polyline points="0,6.326886 178.017424,6.326886 178.017424,45.888910 0,45.888910" fill="green"></polyline>
    <polyline points="178.017424,7.892542 257.597148,7.892542 257.597148,44.323254 178.017424,44.323254" fill="blue"></polyline>
  </g>
</svg>

https://jsfiddle.net/y85s290r/5/

Чтобы повернуть против часовой стрелки, вместо этого поверните на -90 градусов. Это оставит объект в верхней части SVG, поэтому вам нужно переместить его вниз. Для этого просто используйте преобразование translate() после поворота.

<g transform="translate(0,257.6) rotate(-90)">

Примечание: перевод идет первым в списке, потому что операции преобразования применяются справа налево.

https://jsfiddle.net/y85s290r/7/

person Paul LeBeau    schedule 05.07.2015
comment
спасибо за ответ, и это почти так, как я хотел, но кажется, что это другой угол 90 :) в вашем примере -90 не работает. - person Dryadwoods; 05.07.2015
comment
Я обновил ответ версией, которая вращается против часовой стрелки. - person Paul LeBeau; 05.07.2015
comment
вот и все :) спасибо за такой быстрый ответ. Хороших выходных. - person Dryadwoods; 05.07.2015