SVG 互动版

SVG简介

什么是SVG？ SVG的历史和优点 SVG 实例 HTML 页面中的 SVG

SVG 形状

SVG 矩形 SVG 圆形 SVG 椭圆 SVG 线条 SVG 多边形 SVG 折线

SVG 滤镜与渐变

SVG 滤镜简介 SVG 高斯滤镜 SVG 阴影效果 SVG 线性渐变 SVG 放射渐变

SVG 路径

SVG 路径简介 SVG 直线命令三次贝塞尔曲线指令 (C,S) 二次贝塞尔曲线指令 (Q,T) 椭圆弧线 (A)

SVG 文本

<text>及其属性 tspan 路径文本 <a> - 超链接

剪切和遮罩

创建剪切遮罩用opacity定义透明度

在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

什么是SVG？

学习之前应具备的基础知识：

HTML

XML 基础

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG的历史和优点