一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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