원클릭으로 Manus에서 모든 스킬 실행

svgjs

스타1

포크0

업데이트2026년 6월 7일 23:00

SVG.js — lightweight SVG manipulation & animation library. Zero dependencies, chainable API, full SVG spec coverage. Create/position/animate shapes (rect/circle/ellipse/line/polyline/polygon/path), text, images, groups, gradients, masks, patterns, text paths.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

openlark

openlark/skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

SVG.js

Zero-dependency SVG manipulation and animation. npm install @svgdotjs/svg.js or import { SVG } from '@svgdotjs/svg.js'

Use Cases

Use when drawing SVG, animating vector graphics, building data visualizations, creating SVG-based UI components, or manipulating SVG DOM.

Core API

SVG() — entry point for everything: create doc, get from DOM, create from fragment:

const draw = SVG().addTo('body').size(300, 300)  // SVG doc MUST have explicit size()
const rect = SVG('#myRect')                       // get from DOM
const el = SVG('<circle>')                        // create from fragment

Chainable — every setter returns this:

draw.rect(100, 100).fill('#f06').stroke({ width: 2, color: '#000' }).move(50, 50)

// .animate() starts animation chain, returns SVG.Runner (NOT the element)
rect.animate(1000).move(200, 200).fill('#0f0')
rect.animate({ duration: 2000, delay: 500, times: 3 }).rotate(45)
// Sequence: rect.animate().fill('#f03').animate().dmove(50, 50)

Quick example:

import { SVG } from '@svgdotjs/svg.js'
const draw = SVG().addTo('body').size(400, 300)
draw.rect(100, 100).fill('#f06').move(50, 50)
draw.circle(50).fill('#0f0').center(200, 150)
draw.text('Hello').font({ family: 'Arial', size: 24 }).move(50, 200)

Progressive References

Shapes: rect/circle/ellipse/line/polyline/polygon/path → references/shapes.md
Text, images, masks, gradients, patterns → references/text-image.md
Positioning, sizing, attr, transforms, tree manipulation → references/manipulating.md
Animation, Runner, Timeline, easing, controllers → references/animating.md
Containers: groups, nested SVG, defs, symbols, links → references/containers.md
Events, custom events, namespaces → references/events.md
Import/export, extend, subclass → references/utilities.md
Color, Matrix, Point, Box, List, PointArray, PathArray → references/classes.md

Gotchas

SVG doc must have explicit size() — defaults to 0×0 without it
.animate() returns Runner, not element — chain .animate() again for sequencing
Positioning works on ALL elements — rect.cx(50) works though cx isn't native to rect
Groups have no geometry — no x/y/w/h; use nested() for positioned containers
Text needs explicit newlines — SVG has no flowing text; use \n or tspan().newLine()
Path animation needs same command structure — both paths must have identical M/C/S commands
css() ≠ attr() — css() sets inline styles, attr() sets SVG attributes
First SVG() call creates invisible parser <svg> — normal, documented in FAQ

이 저장소의 다른 Skills

같은 저장소

ui-scanner

openlark/skills

Crawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns. Output a structured design specification document for UI generation. Suitable for competitive design analysis, UI restoration, design system reverse engineering, style migration, and similar scenarios.

2026-06-261

agent-skills

openlark/skills

Agent Skills standard reference guide. Covers SKILL.md specification format, progressive loading, skill discovery and activation, authoring best practices, quality evaluation, description optimization, and more.

2026-06-261

loop-engineering

openlark/skills

Loop Engineering AI programming paradigm guide. Covers the core concepts of transitioning from single prompt calls to autonomous loop systems, key components, loop patterns, configuration examples, and anti-patterns.

2026-06-251

email-writer-assistant

openlark/skills

A professional email writing assistant. Based on the user's email purpose and content points, writes clear, concise, and polite emails covering subject, body, and attachment notes, adapted to different audiences and scenarios.

2026-06-121

industry-research-advisor

openlark/skills

A senior industry research consultant. Conducts in-depth analysis of specified industries, covering development history, industry trends, competitive landscape, and technological innovation, and outputs forward-looking, actionable recommendations.

2026-06-121

jd-description-writer

openlark/skills

A professional job description (JD) writing assistant. Based on job title and recruitment requirements, writes precise, professional, and compelling job descriptions covering three modules: job responsibilities, qualifications, and key skills.

2026-06-121

name	svgjs
description	SVG.js — lightweight SVG manipulation & animation library. Zero dependencies, chainable API, full SVG spec coverage. Create/position/animate shapes (rect/circle/ellipse/line/polyline/polygon/path), text, images, groups, gradients, masks, patterns, text paths.

SVG.js

Zero-dependency SVG manipulation and animation. npm install @svgdotjs/svg.js or import { SVG } from '@svgdotjs/svg.js'

Use Cases

Use when drawing SVG, animating vector graphics, building data visualizations, creating SVG-based UI components, or manipulating SVG DOM.

Core API

SVG() — entry point for everything: create doc, get from DOM, create from fragment:

const draw = SVG().addTo('body').size(300, 300)  // SVG doc MUST have explicit size()
const rect = SVG('#myRect')                       // get from DOM
const el = SVG('<circle>')                        // create from fragment

Chainable — every setter returns this:

draw.rect(100, 100).fill('#f06').stroke({ width: 2, color: '#000' }).move(50, 50)

// .animate() starts animation chain, returns SVG.Runner (NOT the element)
rect.animate(1000).move(200, 200).fill('#0f0')
rect.animate({ duration: 2000, delay: 500, times: 3 }).rotate(45)
// Sequence: rect.animate().fill('#f03').animate().dmove(50, 50)

Quick example:

import { SVG } from '@svgdotjs/svg.js'
const draw = SVG().addTo('body').size(400, 300)
draw.rect(100, 100).fill('#f06').move(50, 50)
draw.circle(50).fill('#0f0').center(200, 150)
draw.text('Hello').font({ family: 'Arial', size: 24 }).move(50, 200)

Progressive References

Shapes: rect/circle/ellipse/line/polyline/polygon/path → references/shapes.md
Text, images, masks, gradients, patterns → references/text-image.md
Positioning, sizing, attr, transforms, tree manipulation → references/manipulating.md
Animation, Runner, Timeline, easing, controllers → references/animating.md
Containers: groups, nested SVG, defs, symbols, links → references/containers.md
Events, custom events, namespaces → references/events.md
Import/export, extend, subclass → references/utilities.md
Color, Matrix, Point, Box, List, PointArray, PathArray → references/classes.md

Gotchas

SVG doc must have explicit size() — defaults to 0×0 without it
.animate() returns Runner, not element — chain .animate() again for sequencing
Positioning works on ALL elements — rect.cx(50) works though cx isn't native to rect
Groups have no geometry — no x/y/w/h; use nested() for positioned containers
Text needs explicit newlines — SVG has no flowing text; use \n or tspan().newLine()
Path animation needs same command structure — both paths must have identical M/C/S commands
css() ≠ attr() — css() sets inline styles, attr() sets SVG attributes
First SVG() call creates invisible parser <svg> — normal, documented in FAQ