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

我试图对折线进行分组，然后应用变换旋转90，但是由于主svg太宽和太窄，我总是在“丢失”图像。

将它们旋转90度并排放置（垂直视图）的最简单方法是什么？

最佳答案

您想围绕左端附近的点旋转每张图片，以使它们在新对象的左侧变为垂直。因此，由于SVG的高度为252.125，因此您选择的旋转点约为26.17。

最简单的方法是在折线周围添加一个group元素，然后向其添加转换。

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