使用 css 动画从中心缩放 svg
Scale svg from center with css animation
我阅读了一些关于从中心缩放 SVG 路径的内容,但没有任何效果。
div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)}
#circle {
transform: scale(1) translate(0px, 0px);
animation: circle .5s linear 1.3s forwards;
}
@keyframes circle {
to {
transform: scale(4.1) translate(-38px, -38px);
}
}
<div>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#2A2C32" cx="50" cy="50" r="11.5"></circle>
</g>
</svg>
</div>
使用 transform-origin 和 transform-box 并避免所有翻译猜测你在做什么。
div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)}
#circle {
transform: scale(1);
transform-box: fill-box;
transform-origin: center;
animation: circle .5s linear 1.3s forwards;
}
@keyframes circle {
to {
transform: scale(4.1);
}
}
<div>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#2A2C32" cx="50" cy="50" r="11.5"></circle>
</g>
</svg>
</div>
我阅读了一些关于从中心缩放 SVG 路径的内容,但没有任何效果。
div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)}
#circle {
transform: scale(1) translate(0px, 0px);
animation: circle .5s linear 1.3s forwards;
}
@keyframes circle {
to {
transform: scale(4.1) translate(-38px, -38px);
}
}
<div>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#2A2C32" cx="50" cy="50" r="11.5"></circle>
</g>
</svg>
</div>
使用 transform-origin 和 transform-box 并避免所有翻译猜测你在做什么。
div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)}
#circle {
transform: scale(1);
transform-box: fill-box;
transform-origin: center;
animation: circle .5s linear 1.3s forwards;
}
@keyframes circle {
to {
transform: scale(4.1);
}
}
<div>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#2A2C32" cx="50" cy="50" r="11.5"></circle>
</g>
</svg>
</div>