rendering-animate-svg
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
소스 정보
- 저장소
- TheOrcDev/8bitcn-ui
- 최근 소스 활동
- 2026년 1월 16일 09:09
- 감지된 SKILL.md 언어
- 영어
- 스타
- 2,050
- 포크
- 121
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- rendering-animate-svg
- description
- Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
## Animate SVG Wrapper Instead of SVG Element
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead. Important for 8-bit components with pixel art icons and animations.
**Incorrect (animating SVG directly - no hardware acceleration):**
```tsx
function PixelSpinner() {
return (
<svg
className="animate-spin"
viewBox="0 0 16 16"
>
<rect x="2" y="2" width="4" height="4" fill="currentColor" />
</svg>
)
}
```
**Correct (animating wrapper div - hardware accelerated):**
```tsx
function PixelSpinner() {
return (
<div className="animate-spin">
<svg
viewBox="0 0 16 16"
width="16"
height="16"
>
<rect x="2" y="2" width="4" height="4" fill="currentColor" />
</svg>
</div>
)
}
```
**For 8-bit icon components with hover effects:**
```tsx
function RetroIcon({ icon: Icon, className }: RetroIconProps) {
return (
<div className={cn("transition-transform hover:scale-110", className)}>
<Icon />
</div>
)
}
```
This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations, which is especially noticeable for retro pixel art animations.
GitHub에서 보기