- 技术博客
- SVG转换原点（SVG transform origin）
SVG转换原点（SVG transform origin）
示例HTMLCSSJS
更多有趣示例 尽在知屋安砖社区
示例
HTML
<svg viewBox="-51 -51 102 102" width="100" height="100">
<g>
<circle r="50" stroke-width="2" stroke="currentColor" fill="none" />
<path id="offset" d="M 0 -50 v 100" stroke-width="2" stroke="currentColor" fill="none" stroke-dasharray="100" stroke-dashoffset="100" />
<g id="rotate">
<g transform="translate(0 -25)">
<circle r="25" stroke-width="2" stroke="currentColor" fill="none" />
<circle r="2" fill="currentColor" />
<g id="rotate" style="animation-direction: reverse;">
<g id="rotate" style="animation-direction: reverse;">
<g transform="translate(0 -25)">
<path d="M 0 0 v 25" stroke-width="2" stroke="currentColor" fill="none" />
<circle r="2" fill="currentColor" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
CSS
* {
box-sizing: border-box
;
padding: 0
;
margin: 0
;
}
:root {
--animation-duration: 5s
;
}
body {
min-height: 100vh
;
display: grid
;
place-items: center
;
background: hsl(0, 0%, 90%
);
color: hsl(0, 0%, 10%
);
}
svg {
display: block
;
width: 60vmin
;
height: auto
;
}
#rotate {
animation: rotate
var(--animation-duration
) linear infinite
;
}
#offset {
animation: removeOffset
var(--animation-duration
) cubic-bezier(0.445, 0.05, 0.55, 0.95
) infinite
;
}
@keyframes rotate {
to {
transform: rotate(-1turn
);
}
}
@keyframes removeOffset {
50% {
stroke-dashoffset: 0
;
}
}
JS
