svg 路径在旋转时从其正常位置移动
svg path shifts from it's normal position while rotating
我有一个 svg 时钟,当我旋转手时,它会从正常位置移动,而且#minute-hand element transform-box 属性 在此 svg 元素中不起作用
注意:此 svg 代码由 illustrator 生成
以及 codepen 上的另一个演示
@keyframes rotate-hand{
from{transform: rotate(0deg);}
to{transform: rotate(360deg)}
}
/* comment this to see the original hands-shape*/
#seconds-hand, #minutes-hand, #hours-hand{
animation: rotate-hand 5s linear infinite;
transform-box: fill-box;
}
#seconds-hand{
/* animation: rotate-hand 5s linear infinite; */
/* transform-box: fill-box; */
}
#minutes-hand{
}
#hours-hand{
}
<svg xmlns="http://www.w3.org/2000/svg" width="170.5" height="170.5" viewBox="0 0 170.5 170.5" overflow="scroll">
<path id="border_1_"
d="M85.3 0C38.2 0 0 38.2 0 85.3s38.2 85.3 85.3 85.3 85.3-38.2 85.3-85.3S132.3 0 85.3 0zm-1 160c-40.6 0-73.5-32.9-73.5-73.5S43.7 13 84.3 13s75.5 32.9 75.5 73.5-35 73.5-75.5 73.5z"
fill="#002745"/>
<path id="seconds-hand" transform="rotate(134.355 99.90008916 100.15364826)" fill="#2fc0ea"
d="M99.1 78.9h1.5v42.5h-1.5z"/>
<path id="hours-hand" d="M86.2 88.3h-2.5c-.5 0-1-.4-1-1V48.7c0-.5.4-1 1-1h2.5c.5 0 1 .4 1 1v38.6c0 .6-.5 1-1 1z"
fill="#002745"/>
<path id="minutes-hand"
d="M69.2 102.7c-.9-.9-.9-2.3-.1-3.1l14.2-14.7c.9-.9 2.3-.9 3.1-.1.9.9.9 2.3.1 3.1l-14.2 14.7c-.8.9-2.2.9-3.1.1z"
fill="#002745"/>
</svg>
transform-origin:center
是您所需要的,但您必须考虑已经应用于 seconds-hand
的转换。我为它添加了一个 g
元素
@keyframes rotate-hand{
from{transform: rotate(0deg);}
to{transform: rotate(360deg)}
}
/* comment this to see the original hands-shape*/
#seconds-hand, #minutes-hand, #hours-hand{
animation: rotate-hand 5s linear infinite;
transform-origin:center;
}
#minutes-hand {
animation-duration:2s;
}
#seconds-hand {
animation-duration:1s;
}
<svg xmlns="http://www.w3.org/2000/svg" width="170.5" height="170.5" viewBox="0 0 170.5 170.5" overflow="scroll">
<path id="border_1_"
d="M85.3 0C38.2 0 0 38.2 0 85.3s38.2 85.3 85.3 85.3 85.3-38.2 85.3-85.3S132.3 0 85.3 0zm-1 160c-40.6 0-73.5-32.9-73.5-73.5S43.7 13 84.3 13s75.5 32.9 75.5 73.5-35 73.5-75.5 73.5z"
fill="#002745"/>
<g id="seconds-hand">
<path transform="rotate(134.355 99.90008916 100.15364826)" fill="#2fc0ea"
d="M99.1 78.9h1.5v42.5h-1.5z"/>
</g>
<path id="hours-hand" d="M86.2 88.3h-2.5c-.5 0-1-.4-1-1V48.7c0-.5.4-1 1-1h2.5c.5 0 1 .4 1 1v38.6c0 .6-.5 1-1 1z"
fill="#002745"/>
<path id="minutes-hand"
d="M69.2 102.7c-.9-.9-.9-2.3-.1-3.1l14.2-14.7c.9-.9 2.3-.9 3.1-.1.9.9.9 2.3.1 3.1l-14.2 14.7c-.8.9-2.2.9-3.1.1z"
fill="#002745"/>
</svg>
我有一个 svg 时钟,当我旋转手时,它会从正常位置移动,而且#minute-hand element transform-box 属性 在此 svg 元素中不起作用
注意:此 svg 代码由 illustrator 生成
以及 codepen 上的另一个演示
@keyframes rotate-hand{
from{transform: rotate(0deg);}
to{transform: rotate(360deg)}
}
/* comment this to see the original hands-shape*/
#seconds-hand, #minutes-hand, #hours-hand{
animation: rotate-hand 5s linear infinite;
transform-box: fill-box;
}
#seconds-hand{
/* animation: rotate-hand 5s linear infinite; */
/* transform-box: fill-box; */
}
#minutes-hand{
}
#hours-hand{
}
<svg xmlns="http://www.w3.org/2000/svg" width="170.5" height="170.5" viewBox="0 0 170.5 170.5" overflow="scroll">
<path id="border_1_"
d="M85.3 0C38.2 0 0 38.2 0 85.3s38.2 85.3 85.3 85.3 85.3-38.2 85.3-85.3S132.3 0 85.3 0zm-1 160c-40.6 0-73.5-32.9-73.5-73.5S43.7 13 84.3 13s75.5 32.9 75.5 73.5-35 73.5-75.5 73.5z"
fill="#002745"/>
<path id="seconds-hand" transform="rotate(134.355 99.90008916 100.15364826)" fill="#2fc0ea"
d="M99.1 78.9h1.5v42.5h-1.5z"/>
<path id="hours-hand" d="M86.2 88.3h-2.5c-.5 0-1-.4-1-1V48.7c0-.5.4-1 1-1h2.5c.5 0 1 .4 1 1v38.6c0 .6-.5 1-1 1z"
fill="#002745"/>
<path id="minutes-hand"
d="M69.2 102.7c-.9-.9-.9-2.3-.1-3.1l14.2-14.7c.9-.9 2.3-.9 3.1-.1.9.9.9 2.3.1 3.1l-14.2 14.7c-.8.9-2.2.9-3.1.1z"
fill="#002745"/>
</svg>
transform-origin:center
是您所需要的,但您必须考虑已经应用于 seconds-hand
的转换。我为它添加了一个 g
元素
@keyframes rotate-hand{
from{transform: rotate(0deg);}
to{transform: rotate(360deg)}
}
/* comment this to see the original hands-shape*/
#seconds-hand, #minutes-hand, #hours-hand{
animation: rotate-hand 5s linear infinite;
transform-origin:center;
}
#minutes-hand {
animation-duration:2s;
}
#seconds-hand {
animation-duration:1s;
}
<svg xmlns="http://www.w3.org/2000/svg" width="170.5" height="170.5" viewBox="0 0 170.5 170.5" overflow="scroll">
<path id="border_1_"
d="M85.3 0C38.2 0 0 38.2 0 85.3s38.2 85.3 85.3 85.3 85.3-38.2 85.3-85.3S132.3 0 85.3 0zm-1 160c-40.6 0-73.5-32.9-73.5-73.5S43.7 13 84.3 13s75.5 32.9 75.5 73.5-35 73.5-75.5 73.5z"
fill="#002745"/>
<g id="seconds-hand">
<path transform="rotate(134.355 99.90008916 100.15364826)" fill="#2fc0ea"
d="M99.1 78.9h1.5v42.5h-1.5z"/>
</g>
<path id="hours-hand" d="M86.2 88.3h-2.5c-.5 0-1-.4-1-1V48.7c0-.5.4-1 1-1h2.5c.5 0 1 .4 1 1v38.6c0 .6-.5 1-1 1z"
fill="#002745"/>
<path id="minutes-hand"
d="M69.2 102.7c-.9-.9-.9-2.3-.1-3.1l14.2-14.7c.9-.9 2.3-.9 3.1-.1.9.9.9 2.3.1 3.1l-14.2 14.7c-.8.9-2.2.9-3.1.1z"
fill="#002745"/>
</svg>