大佬教程收集整理的这篇文章主要介绍了使用CSS旋转SVG路径,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
* { BACkground: #e1e1e1; }
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="@R_772_10107@://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>
如何旋转180度?!
* { BACkground: #e1e1e1; } svg { transform: rotate(180deg); }
<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="@R_772_10107@://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>
或者,如果您只想旋转路径而不是svg本身,那么请在下面的代码段中包含transform-origin:
* { 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="@R_772_10107@://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>
以上是大佬教程为你收集整理的使用CSS旋转SVG路径全部内容,希望文章能够帮你解决使用CSS旋转SVG路径所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。