[英]How do I move an SVG group with CSS keyframes?
我想使用 CSS 关键帧在其容器中移动 SVG 元素。
如果我只有一个<circle />
,我可以简单地在关键帧定义中使用cx
/ cy
属性。 但是如果我有一个任意组( <g />
)怎么办? 一个组没有cx
/ cy
,如果我想使用 CSS 的transform: translate(x,y)
,我似乎必须定义一个单位(如px
)。
MWE(如何为bar
组设置动画?):
svg { padding: 5px; width: 150px; height: 150px; border: 1px solid #000; }.foo { animation-duration: 3s; animation-iteration-count: infinite; animation-name: moveFoo; }.bar { animation-duration: 3s; animation-iteration-count: infinite; animation-name: moveBar; } @keyframes moveFoo { from { cx: 10; cy: 10; } to { cx: 90; cy: 90; } } /* how to define this? */ @keyframes moveBar { }
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle class="foo" r="5" fill="red" /> <g class="bar" transform="translate(90 10)"> <circle r="5" fill="blue" /> <text y="1" text-anchor="middle" fill="white" font-family="monospace" font-size="5"> AB </text> </g> </svg>
使用animateTransform
执行此操作:
svg { padding: 5px; width: 150px; height: 150px; border: 1px solid #000; }
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle class="foo" r="5" fill="red" /> <g id="bar" transform="translate(90 10)"> <circle r="5" fill="blue" /> <text y="1" text-anchor="middle" fill="white" font-family="monospace" font-size="5"> AB </text> </g> <animateTransform xlink:href="#bar" attributeName="transform" type="translate" from="90,10" to="90,90" dur="2" repeatCount="indefinite"/> </svg>
如果我想使用 CSS 的变换,我似乎必须定义一个单位(如 px):translate(x,y)。
是的,这是真的,你知道。
但这不会成为问题,如果您已经在<svg>
元素中声明了viewbox
属性。
如果您声明了一个viewbox
, 1px
将代表 1 个 viewbox 单位。
工作示例:
svg { padding: 5px; width: 150px; height: 150px; border: 1px solid #000; }.foo { fill: red; transform: translate(10px, 10px); animation-duration: 3s; animation-iteration-count: infinite; animation-name: moveFoo; }.bar { transform: translate(90px, 10px); animation-duration: 3s; animation-iteration-count: infinite; animation-name: moveBar; }.bar circle { fill: blue; }.bar text { fill: white; font-family: monospace; font-size: 5px; text-anchor: middle; } @keyframes moveFoo { 0% {transform: translate(10px, 10px);} 50% {transform: translate(90px, 90px);} 100% {transform: translate(10px, 10px);} } @keyframes moveBar { 0% {transform: translate(90px, 10px);} 50% {transform: translate(10px, 90px);} 100% {transform: translate(90px, 10px);} }
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle class="foo" r="5" /> <g class="bar"> <circle r="5" /> <text y="1">AB</text> </g> </svg>
如果您需要使用@keyframes
而不是动画 cx 和 cy 属性,您必须从transform:translate(0,0)
动画到transform:translate(90px,90px)
(例如。)
否则 Temani Afif 的回答是完全有效的。 `
svg { padding: 5px; width: 150px; height: 150px; border: 1px solid #000; }.foo { transform:translate(0,0); animation-duration: 3s; animation-iteration-count: infinite; animation-name: moveFoo; }.bar { transform:translate(0,0); animation-duration: 3s; animation-iteration-count: infinite; animation-name: moveBar; } @keyframes moveFoo { from { transform:translate(0,0) } to { transform:translate(90px,90px) } } /* how to define this? */ @keyframes moveBar { from { transform:translate(0,0) } to { transform:translate(90px,90px) } }
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle class="foo" r="5" fill="red" /> <g class="bar" > <circle r="5" fill="blue" cx="10" cy="10" /> <text x="10" y="11" text-anchor="middle" fill="white" font-family="monospace" font-size="5"> AB </text> </g> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.