时间戳

首页 > 解决方案 > 如何旋转svg圆

svg - 如何旋转svg圆

问题描述

我想使用相同的 svg，但希望将半圆 svg 旋转 90 度。我该怎么做呢？谢谢。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" fill="orange" />
</svg>

标签： svg

解决方案

SVG 语法

  • 不能在rotate()函数中使用单位
  • 只能将旋转中心声明为属性的一部分

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" transform="rotate(90, 50 50)" fill="orange" />
</svg>

CSS 语法

  • 必须为rotate()函数和变换原点使用单位
  • 只能将旋转中心声明为 CSStransform-origin

path {
    transform: rotate(90deg);
    transform-origin: 50px 50px;
}
<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="grey" />
  <path d="M0,50 a1,1 0 0,0 100,0" fill="orange" />
</svg>

推荐阅读