顺时针旋转Svg元素[重复]答案

【问题标题】：Rotate Svg element clockwise [duplicate]顺时针旋转Svg元素[重复]
【发布时间】：2016-05-17 10:44:54
【问题描述】：

<svg>
       <path xmlns="http://www.w3.org/2000/svg" fill="#012d26" d=" M 81.16 38.23 C 83.16 42.68 85.01 47.20 87.05 51.63 C 89.59 57.31 91.99 63.04 94.50 68.73 C 107.87 65.61 122.71 76.15 123.25 90.07 C 124.68 103.15 112.95 115.43 99.93 115.20 C 87.82 115.97 76.31 106.03 75.34 93.93 C 74.34 84.23 80.19 74.37 89.14 70.51 C 87.75 64.47 86.08 58.49 84.69 52.45 C 83.60 47.69 82.33 42.97 81.16 38.23 Z"/>
    </svg>

我想像时钟一样顺时针旋转它。但是使用 transform:rotate(10deg) 将移动其基点。我想保持积分不变。

【问题讨论】：

stackoverflow.com/questions/6633536/…

标签： javascript jquery svg

【解决方案1】：

像这样使用transform & transform-origin：

svg path {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);

  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%; 
          transform-origin: 0% 0%;
}

JSFiddle

【讨论】：

谢谢...transform-origin: 50% 70%;添加这个解决了问题！
@atulquest93 如果这回答了您的问题，请标记为已解决。