我有一个SVG图像我想要应用CSS变换...它工作但它行为不端..我希望SVG的路径围绕固定点旋转，就像时钟中的秒针一样。这是我到目前为止所取得的成果......我怎样才能将这只手（svg路径或组）旋转到一个固定点...请参阅我的代码片段以获取更多信息。谢谢。
html{
min-height: 100%;
}
body{
width: 100%;
min-height: 625px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
align-items: center;
}
.fil3 {
animation: rotate 5s infinite;
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
transform-origin: center;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300px" height="500px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="-950 0 2111 828"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil2 {fill:#848688}
.fil4 {fill:#F8A25F}
.fil1 {fill:#848688;fill-rule:nonzero}
.fil3 {fill:#F8A25F;fill-rule:nonzero;}
.fil0 {fill:#A0CD47;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M347 478l0 154 0 146c0,38 24,45 37,45 12,0 37,-7 37,-45l0 -149 0 -148 0 -149c0,-38 -25,-45 -37,-45 -13,0 -37,7 -37,45l0 146z"/>
<path class="fil1" d="M479 266l-109 110 -103 103c-27,27 -14,49 -5,58 9,9 31,22 58,-5l105 -106 105 -105 236 -237c27,-27 14,-49 5,-58 -8,-9 -31,-22 -58,5l-234 235z"/>
<circle class="fil2" cx="384" cy="414" r="82"/>
<g>
<path class="fil3" d="M119 155l105 114 242 262c25,28 39,25 44,20 4,-4 9,-17 -17,-45l-244 -265 -100 -109 -101 -109c-26,-28 -40,-24 -44,-20 -5,4 -10,17 16,45l99 107z"/>
</g>
<circle class="fil4" cx="384" cy="414" r="37"/>
</g>
</svg>
答案 0 :(得分：2)
在SVG世界中，一切都是相对于轴原点（甚至是变形），它不是行为不端。我更改了动画并删除了不需要的过渡属性。请尝试以下方法：
html{
min-height: 100%;
}
body{
width: 100%;
min-height: 625px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
align-items: center;
}
.fil3 {
transform: translate(380px, 410px) rotate(0deg);
animation: rotate 5s infinite;
}
@keyframes rotate {
100% {
transform: translate(380px, 410px) rotate(360deg);
}
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="300px" height="500px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="-950 0 2111 828"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil2 {fill:#848688}
.fil4 {fill:#F8A25F}
.fil1 {fill:#848688;fill-rule:nonzero}
.fil3 {fill:#F8A25F;fill-rule:nonzero;}
.fil0 {fill:#A0CD47;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M347 478l0 154 0 146c0,38 24,45 37,45 12,0 37,-7 37,-45l0 -149 0 -148 0 -149c0,-38 -25,-45 -37,-45 -13,0 -37,7 -37,45l0 146z"/>
<path class="fil1" d="M479 266l-109 110 -103 103c-27,27 -14,49 -5,58 9,9 31,22 58,-5l105 -106 105 -105 236 -237c27,-27 14,-49 5,-58 -8,-9 -31,-22 -58,5l-234 235z"/>
<circle class="fil2" cx="384" cy="414" r="82"/>
<g>
<path class="fil3" d="M119 155l105 114 242 262c25,28 39,25 44,20 4,-4 9,-17 -17,-45l-244 -265 -100 -109 -101 -109c-26,-28 -40,-24 -44,-20 -5,4 -10,17 16,45l99 107z"/>
</g>
<circle class="fil4" cx="384" cy="414" r="37"/>
</g>
</svg>
答案 1 :(得分：1)
对于InkToolbar，您应指定时钟的中心。可以直接从钟面中心的橙色圆圈的transform-orgin和cx坐标读取坐标。
cy您的演示更新了该更改：
transform-origin: 384px 414px;
html{
min-height: 100%;
}
body{
width: 100%;
min-height: 625px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
align-items: center;
}
.fil3 {
animation: rotate 5s infinite;
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
transform-origin: 384px 414px;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}