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场景编辑器

< a > - 超链接

可以添加到任意的图形上
xlink:href 指定连接地址
xlink:title 指定连接提示
target 指定打开目标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.hubwiz.com" target="_blank">
    <text x="0" y="15" fill="red">I love 汇智网</text>
  </a>
</svg>