如何翻转SVG坐标？
如何翻转SVG坐标？
提问于 2017-02-09 21:22:31
我有一个条形图，其中的条形图是在SVG中创建的水平。如何翻转SVG使条形图垂直？
我现在的CSS文件中有transform: 1, -1，但是它不能工作。还有其他建议吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-09 22:52:07
下面的示例演示了您可能使用的一个策略。在SVG代码中，有一个标有标签的图被绘制了5次：
- (未经转换的原件)
-
- 旋转90度
-
- 旋转了90度，
- 然后垂直翻转(并转换回位置)
-
- 旋转了90度，
- 然后垂直翻转(并转换回位置)，
- 然后，所有标签再次垂直翻转，以恢复每个标签的方向(每个标签分别转换回位置)
-
- 旋转了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>
Stack Overflow用户
发布于 2017-02-09 21:32:33
您可以使用transform和rotate()将SVG旋转90度。
示例
transform: rotate(90);注意:由于您没有提供任何代码，所以在使用
rotate()之后，可能还需要使用translate()将SVG移回原处。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42147119
复制相关文章
相似问题
腾讯云开发者
