使用 CSS 旋转 SVG 路径

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33186431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 11:31:38  来源:igfitidea点击:

Rotate SVG path using CSS

csssvg

提问by NewCod3r

I have this SVG:

我有这个 SVG:

* {
  background: #e1e1e1;
}
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

How to rotate it by 180 degree?!

如何旋转180度?!

DEMO

演示

回答by Harry

Just use the element type selector and add the transform: rotate(180deg)property to it like in the below snippet.

只需使用元素类型选择器并向其添加transform: rotate(180deg)属性,就像下面的代码片段一样。

* {
  background: #e1e1e1;
}
svg {
  transform: rotate(180deg);
}
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>



Or, if you want to rotate only the pathand not the svgitself, then include a transform-originlike in the below snippet:

或者,如果您只想旋转path而不旋转其svg本身,则transform-origin在以下代码段中包含一个like:

* {
  background: #e1e1e1;
}
path {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L100 100 L0 100" stroke-width="0"></path>
</svg>