旋转SVG元素顺时针

<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>

我想在像时钟顺时针方向旋转此。 BUt使用transform：rotate（10deg）会改变其基点。我想保留点数。

来源

2016-05-17 Atul Sharma

http://stackoverflow.com/questions/6633536/css-rotation-with-respect-to-a-reference-point –

使用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

来源

2016-05-17 10:50:56 Steveo

感谢...'变形 - 起源：50％70％;'增加这个解决了问题！ –

@ atulquest93如果这回答你的问题，那么请标记为已解决。 – Steveo

旋转SVG元素顺时针

回答

相关问题