Question

我有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，但我总是＆＃34;失去＆＃34;自主svg以来的图像宽而窄。

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

Answer 1

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

最简单的方法是在折线周围添加一个组元素，并将变换添加到该折线。

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

然后通过切换每个上的宽度和高度将SVG从“横向”变为“纵向”。

translate()

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

要逆时针旋转，请转动-90度。这将使对象位于SVG的顶部，因此您需要将其向下移动。要做到这一点，只需在旋转后使用<g transform="translate(0,257.6) rotate(-90)">变换。

node/1?_format=json

注意：翻译首先出现在列表中，因为变换操作从右到左应用。

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

SVG并排 - 全部旋转90

1 个答案: