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

浏览器兼容性 🌐

特性ChromeFirefoxSafariEdge
基础 SVG
SMIL
CSS 动画
滤镜

实用工具推荐 🛠️

  1. SVG 编辑器

    • Inkscape
    • Adobe Illustrator
    • Figma
  2. SVG 优化工具

    • SVGO
    • SVG OMG
    • SVG Optimizer
  3. JavaScript 库

    • Snap.svg
    • SVG.js
    • GreenSock

总结 🎯

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

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

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

终身学习,共同成长。

咱们下一期见

💻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63097.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

变点问题的公式推导

背景与关键定义 变点检测问题 变点检测的目标是在给定的观测序列 y 1 , y 2 , … , y T y_1, y_2, \dots, y_T y1​,y2​,…,yT​ 中&#xff0c;找到一个或多个点&#xff08;变点&#xff09;&#xff0c;使得每段子序列&#xff08;即变点划分的区间&#xff09;能被一个较…

使用 useMemo 和 React.memo 优化 React 组件渲染

在 React 中&#xff0c;性能优化是一个重要的主题&#xff0c;特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemo 和 React.memo 来优化子组件的渲染。 1. 组件结构 创建一个父组件&#xff0c;包含两个子组件&#xff1a; MemoChild&#xff1a;使用 R…

解决github网络慢的问题

前言 本文采用替换host的方式来加速github的git请求&#xff0c;主要我自己用来备份的懒人方式&#xff0c;不然每次都要手动修改hosts文件&#xff0c;skrskrskr… 一、获取到可用的ip 先到这个网站查询到低延迟的ip 站长工具&#xff1a;https://ping.chinaz.com/ 第2步&…

vue3【实战】多页签【组件封装】PageTabs (含右键快捷菜单组件封装 Contextmenu -- 关闭其他页签,关闭所有页签)

效果预览 技术方案 vue3 ( vite | TS | vueUse | AutoImport | pinia) Element Plus UnoCSS 技术要点 需开启 pinia 持久化右键菜单组件借助了 Element Plus 的样式 代码实现 src/components/PageTabs.vue <script setup lang"ts"> import { usePageTabsSto…

Scala的正则表达式

package hfdobject Test35_3 {def main(args: Array[String]): Unit {println("a\tb")//定义一个规则 正则表达式//1. .表示除了换行之外的其他的任意单个字符//2. \d等于[0-9] 匹配一个数字//3. \D除了\d之外的其他的任意字符&#xff0c;表示非数字//4. \w等价于[…

java的几种排序算法(详细)

冒泡排序&#xff08;Bubble Sort&#xff09; 基本原理&#xff1a; 冒泡排序是一种简单的比较排序算法。它重复地走访要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也…

vue项目env文件的使用(vue cli2和vue cli3)

Vue CLI 2 环境 在 Vue CLI 2 中&#xff0c;需要安装 dotenv 包来加载和使用环境变量。 步骤&#xff1a; 安装 dotenv&#xff1a;首先安装 dotenv 包 npm install dotenv --save创建 .env 文件&#xff1a;在项目的根目录下创建一个 .env 文件&#xff0c;并在其中定义你的…

全面解析 Transformer:改变深度学习格局的神经网络架构

目录 一、什么是 Transformer&#xff1f; 二、Transformer 的结构解析 1. 编码器&#xff08;Encoder&#xff09; 2. 解码器&#xff08;Decoder&#xff09; 3. Transformer 模型结构图 三、核心技术&#xff1a;注意力机制与多头注意力 1. 注意力机制 2. 多头注意力&…

使用YOLO系列txt目标检测标签的滑窗切割:批量处理图像和标签的实用工具

使用YOLO系列txt目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具 使用YOLO的TXT目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具背景1. 代码概述2. 滑窗切割算法原理滑窗切割步骤&#xff1a;示例&#xff1a; 3. **代码实现**1. **加载标签…

Java ArrayList 详解

Java ArrayList 详解 ArrayList 是 Java 集合框架&#xff08;Collection Framework&#xff09;中最常用的类之一&#xff0c;是一种基于动态数组的数据结构&#xff0c;属于 List 接口的实现类。它允许存储重复的元素&#xff0c;有序&#xff0c;支持随机访问&#xff0c;且…

springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码

springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&…

Rust学习笔记_13——枚举

Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包 枚举 文章目录 枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型 在Rust编程语言中&#xff0c;枚举&#xff08;enum…

容器运行应用及Docker命令

文章目录 一、使用容器运行Nginx应用1_使用docker run命令运行Nginx应用1 观察下载容器镜像过程2 观察容器运行情况 2_访问容器中运行的Nginx服务1 确认容器IP地址2 容器网络说明3 使用curl命令访问 二、Docker命令1_Docker命令获取帮助方法2_Docker官网提供的命令说明3_docker…

深入浅出:php-学习入门全攻略

文章目录 1. 为什么选择 PHP&#xff1f;2. 安装 PHP 环境2.1 Windows 系统安装步骤 1&#xff1a;下载 PHP步骤 2&#xff1a;解压并配置步骤 3&#xff1a;配置环境变量步骤 4&#xff1a;验证安装 2.2 Mac 系统安装步骤 1&#xff1a;使用 Homebrew 安装步骤 2&#xff1a;验…

【热门主题】000075 探索嵌入式硬件设计的奥秘

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…

数据分析(一): 掌握STDF 掌握金钥匙-码农切入半导体的捷径

中国的半导体行业必然崛起&#xff01;看清这个大势&#xff0c;就会有很多机会。 今天&#xff0c;我们一起来了解一下半导体行业的一朵金花&#xff1a;STDF。 实际上这只是一种文件格式&#xff0c;但是当你熟练掌握解析这种文件的时候&#xff0c;你就已经打开在这个基础…

PostgreSQLt二进制安装-contos7

1、安装依赖 yum install -y gcc readline readline-devel zlib-devel net-tools perl wget numactl libicu-devel bison flex openssl-devel pam pam-devel libxml2 libxml2-devel libxslt libxslt-devel openldap openldap-devel 2、创建目录 mkdir -p /data/postgresql/{…

Latex转word(docx)或者说PDF转word 一个相对靠谱的方式

0. 前言 投文章过程中总会有各种各样的要求&#xff0c;其中提供word格式的手稿往往是令我头疼的一件事。尤其在多公式的文章中&#xff0c;其中公式转换是一个头疼的地方&#xff0c;还有很多图表&#xff0c;格式等等&#xff0c;想想就让人头疼欲裂。实践中摸索出一条相对靠…

AWS创建ec2实例并连接成功

aws创建ec2实例并连接 aws创建ec2并连接 1.ec2创建前准备 首先创建一个VPC隔离云资源并且有公有子网 2.创建EC2实例 1.启动新实例或者创建实例 2.创建实例名 3.选择AMI使用linux(HVM) 4.选择实例类型 5.创建密钥对下载到本地并填入密钥对名称 6.选择自己创建的VPC和公有子网…

“放弃Redis Desktop Manager使用Redis Insight”:日常使用教程(Redis可视化工具)

文章目录 更新Redis Insight连接页面基础解释自动更新key汉化暂时没有找到方法&#xff0c; Redis Desktop Manager在连接上右键在数据库上右键在key上右键1、添加连接2、key过期时间 参考文章 更新 (TωT)&#xff89;~~~ β&#xff59;ё β&#xff59;ё~ 现在在维护另一…