HTML5系列（5）-- SVG 集成详解

前端技术探索系列：HTML5 SVG 集成详解 🎨

开篇寄语 👋

前端开发者们，

在前五篇文章中，我们探讨了 HTML5 的多个特性。今天，让我们深入了解 SVG 的魅力，看看如何创建可缩放的矢量图形。

一、SVG 基础入门 ✨

1. SVG 语法基础

<!-- 内联 SVG -->
<svg width="200" height="200" viewBox="0 0 200 200"><!-- 基础图形 --><circle cx="100" cy="100" r="50" fill="blue" /><rect x="50" y="50" width="100" height="100" fill="red" opacity="0.5" /><path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="black" />
</svg>

2. 基础图形绘制

<svg width="400" height="400"><!-- 矩形 --><rectx="10" y="10"width="100" height="50"fill="blue"stroke="black"stroke-width="2"rx="10" ry="10"/><!-- 圆形 --><circlecx="200" cy="50"r="40"fill="red"stroke="darkred"stroke-width="2"/><!-- 椭圆 --><ellipsecx="300" cy="50"rx="60" ry="30"fill="green"/><!-- 线条 --><linex1="10" y1="100"x2="100" y2="150"stroke="purple"stroke-width="2"/><!-- 多边形 --><polygonpoints="200,100 250,150 150,150"fill="orange"/>
</svg>

3. 复用与组织

<!-- 定义可重用元素 -->
<svg><defs><!-- 渐变定义 --><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);" /><stop offset="100%" style="stop-color:rgb(255,0,0);" /></linearGradient><!-- 符号定义 --><symbol id="star" viewBox="0 0 32 32"><path d="M16 0 L20 12 L32 12 L22 20 L26 32 L16 24 L6 32 L10 20 L0 12 L12 12 Z" /></symbol></defs><!-- 使用定义的元素 --><rect width="200" height="100" fill="url(#gradient)" /><use href="#star" x="50" y="50" width="32" height="32" fill="gold" />
</svg>

二、SVG 动画技术 🎬

1. SMIL 动画

<svg width="300" height="300"><circle cx="150" cy="150" r="50" fill="blue"><!-- 位置动画 --><animateTransformattributeName="transform"type="translate"values="0,0; 50,0; 0,0"dur="2s"repeatCount="indefinite"/><!-- 颜色动画 --><animateattributeName="fill"values="blue;red;blue"dur="3s"repeatCount="indefinite"/><!-- 路径动画 --><animateMotionpath="M 0 0 H 100 V 100 H 0 Z"dur="4s"repeatCount="indefinite"/></circle>
</svg>

2. CSS 动画

<style>
.rotating-star {animation: rotate 3s linear infinite;transform-origin: center;
}@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}.pulsing-circle {animation: pulse 2s ease-in-out infinite;
}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }
}
</style><svg width="200" height="200"><use href="#star" class="rotating-star" x="50" y="50" width="100" height="100" /><circle class="pulsing-circle" cx="100" cy="100" r="50" fill="purple" />
</svg>

3. JavaScript 动画

class SVGAnimator {constructor(element) {this.element = element;this.animations = new Map();}// 添加动画animate(properties, duration, easing = 'linear') {const startTime = performance.now();const initialValues = {};// 获取初始值for (const prop in properties) {initialValues[prop] = parseFloat(this.element.getAttribute(prop));}const animation = {startTime,duration,initialValues,targetValues: properties,easing};this.animations.set(animation, true);this.startAnimation();}// 动画循环startAnimation() {if (this.animationFrame) return;const animate = (currentTime) => {let hasRunning = false;this.animations.forEach((isRunning, animation) => {if (!isRunning) return;const elapsed = currentTime - animation.startTime;const progress = Math.min(elapsed / animation.duration, 1);if (progress < 1) {hasRunning = true;this.updateProperties(animation, progress);} else {this.animations.delete(animation);}});if (hasRunning) {this.animationFrame = requestAnimationFrame(animate);} else {this.animationFrame = null;}};this.animationFrame = requestAnimationFrame(animate);}// 更新属性updateProperties(animation, progress) {for (const prop in animation.targetValues) {const initial = animation.initialValues[prop];const target = animation.targetValues[prop];const current = initial + (target - initial) * progress;this.element.setAttribute(prop, current);}}
}

三、SVG 交互实现 🖱️

1. 事件处理

class SVGInteraction {constructor(svg) {this.svg = svg;this.elements = new Map();this.setupEvents();}setupEvents() {this.svg.addEventListener('click', this.handleClick.bind(this));this.svg.addEventListener('mousemove', this.handleMouseMove.bind(this));}// 获取 SVG 坐标getSVGPoint(event) {const point = this.svg.createSVGPoint();point.x = event.clientX;point.y = event.clientY;return point.matrixTransform(this.svg.getScreenCTM().inverse());}// 添加可交互元素addInteractiveElement(element, handlers) {this.elements.set(element, handlers);element.addEventListener('mouseenter', () => {if (handlers.hover) {handlers.hover(element, true);}});element.addEventListener('mouseleave', () => {if (handlers.hover) {handlers.hover(element, false);}});}handleClick(event) {const point = this.getSVGPoint(event);this.elements.forEach((handlers, element) => {if (this.isPointInElement(point, element) && handlers.click) {handlers.click(element);}});}handleMouseMove(event) {const point = this.getSVGPoint(event);this.elements.forEach((handlers, element) => {if (this.isPointInElement(point, element) && handlers.move) {handlers.move(element, point);}});}isPointInElement(point, element) {const bbox = element.getBBox();return (point.x >= bbox.x &&point.x <= bbox.x + bbox.width &&point.y >= bbox.y &&point.y <= bbox.y + bbox.height);}
}

2. 滤镜效果

<svg width="400" height="400"><defs><!-- 高斯模糊 --><filter id="blur"><feGaussianBlur stdDeviation="2" /></filter><!-- 阴影效果 --><filter id="shadow"><feDropShadow dx="2" dy="2" stdDeviation="2" /></filter><!-- 发光效果 --><filter id="glow"><feGaussianBlur stdDeviation="2" result="coloredBlur" /><feMerge><feMergeNode in="coloredBlur" /><feMergeNode in="SourceGraphic" /></feMerge></filter></defs><!-- 使用滤镜 --><circle cx="100" cy="100" r="50" fill="purple" filter="url(#glow)" />
</svg>

四、实践项目：动态 LOGO 生成器 🎯

class LogoGenerator {constructor(container) {this.container = container;this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');this.setup();}setup() {this.svg.setAttribute('width', '300');this.svg.setAttribute('height', '300');this.container.appendChild(this.svg);// 定义滤镜和渐变this.defineFilters();this.defineGradients();}defineFilters() {const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');// 添加发光效果const glowFilter = `<filter id="logo-glow"><feGaussianBlur stdDeviation="2" result="blur" /><feFlood flood-color="rgba(0,0,255,0.3)" result="color" /><feComposite in="color" in2="blur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter>`;defs.innerHTML = glowFilter;this.svg.appendChild(defs);}defineGradients() {const defs = this.svg.querySelector('defs');// 添加渐变const gradient = `<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#4CAF50" /><stop offset="100%" style="stop-color:#2196F3" /></linearGradient>`;defs.innerHTML += gradient;}// 生成 LogogenerateLogo(text, options = {}) {const {fontSize = 48,fontFamily = 'Arial',color = 'url(#logo-gradient)',useGlow = true} = options;// 清空现有内容while (this.svg.lastChild) {this.svg.removeChild(this.svg.lastChild);}// 重新添加 defsthis.defineFilters();this.defineGradients();// 创建文本元素const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');textElement.textContent = text;textElement.setAttribute('x', '150');textElement.setAttribute('y', '150');textElement.setAttribute('text-anchor', 'middle');textElement.setAttribute('dominant-baseline', 'middle');textElement.setAttribute('font-size', fontSize);textElement.setAttribute('font-family', fontFamily);textElement.setAttribute('fill', color);if (useGlow) {textElement.setAttribute('filter', 'url(#logo-glow)');}// 添加动画const animation = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');animation.setAttribute('attributeName', 'transform');animation.setAttribute('type', 'scale');animation.setAttribute('values', '1;1.1;1');animation.setAttribute('dur', '2s');animation.setAttribute('repeatCount', 'indefinite');textElement.appendChild(animation);this.svg.appendChild(textElement);return this;}// 导出 SVGexport() {const serializer = new XMLSerializer();return serializer.serializeToString(this.svg);}// 导出 PNGasync exportPNG() {return new Promise((resolve, reject) => {const image = new Image();image.onload = () => {const canvas = document.createElement('canvas');canvas.width = 300;canvas.height = 300;const ctx = canvas.getContext('2d');ctx.drawImage(image, 0, 0);resolve(canvas.toDataURL('image/png'));};image.onerror = reject;const svgBlob = new Blob([this.export()], { type: 'image/svg+xml' });image.src = URL.createObjectURL(svgBlob);});}
}// 使用示例
const logoGen = new LogoGenerator(document.getElementById('logo-container'));
logoGen.generateLogo('LOGO', {fontSize: 64,useGlow: true
});

性能优化建议 🚀

1. SVG 优化

   • 使用 <use> 复用元素
   • 压缩 SVG 代码
   • 避免不必要的精度

2. 动画优化

   • 使用 CSS 动画代替 SMIL
   • 使用 transform 代替位置属性
   • 避免频繁的 DOM 操作

3. 交互优化

   • 使用事件委托
   • 优化碰撞检测
   • 使用 requestAnimationFrame

浏览器兼容性 🌐

特性	Chrome	Firefox	Safari	Edge
基础 SVG	✅	✅	✅	✅
SMIL	✅	✅	✅	✅
CSS 动画	✅	✅	✅	✅
滤镜	✅	✅	✅	✅

实用工具推荐 🛠️

1. SVG 编辑器

   • Inkscape
   • Adobe Illustrator
   • Figma

2. SVG 优化工具

   • SVGO
   • SVG OMG
   • SVG Optimizer

3. JavaScript 库

   • Snap.svg
   • SVG.js
   • GreenSock

总结 🎯

SVG 为我们提供了强大的矢量图形能力：

• 可缩放性 📏
• 动画效果 🎬
• 交互能力 🖱️
• 滤镜效果 🎨

---

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻