SVG基本概念及简单应用

最新推荐文章于 2023-03-13 14:52:47 发布
最新推荐文章于 2023-03-13 14:52:47 发布
阅读量649 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevin661996/article/details/109701225
版权

SVG

在前面，我们已经向大家介绍了如何使用 HTML 5 中的 Canvas 元素来进行图形的绘制。

实际上，在 Canvas 诞生之前，有很长一段时间都是使用 SVG 来绘制图形的。所以在本小节中，我们将为大家简单介绍一下如何使用 SVG 来绘制图形。

SVG 简介

SVG 意为可缩放矢量图形。它是使用 XML 格式来定义的图像。通过 SVG 画出来的图形为矢量图，所以 SVG 图像在放大或者改变尺寸的情况下图形的质量不会有所损失。

SVG的历史和优势

在 2003 年 1 月 14 日，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比，使用 SVG 的优势在于：

  • SVG 可被非常多的工具读取和修改（比如记事本）。

  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

  • SVG 是可伸缩的。

  • SVG 图像可在任何的分辨率下被高质量地打印。

  • SVG 可在图像质量不下降的情况下被放大。

  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。

  • SVG 可以与 Java 技术一起运行。

  • SVG 是开放的标准。

  • SVG 文件是纯粹的 XML。

  • SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

SVG 实例

下面我们来快速演示一个 SVG 的示例，创建一个 1.svg 的文件，文件中的代码如下：

<?xml version="1.0" standalone="no"?>
​
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

这里简单解释一下每句代码所代表的含义：

  1. 第一行包含了 XML 声明。standalone 属性规定此 SVG 文件是否是独立的，或含有对外部文件的引用。standalone="no" 意味着该 SVG 文档会引用一个外部文件，也就是下面的 DTD 文件。

  2. 第二三行引用了外部 DTD 文件，位于http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd。可以看出，该 DTD 文件是 W3C 所定义的，里面含有所有允许的 SVG 元素。

  3. SVG 代码以 svg 元素开始，包括开启标签<svg>和关闭标签</svg>，这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性定义所使用的 SVG 版本，xmlns 属性可定义 SVG 的命名空间。

  4. SVG 的 circle 标签用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这 2 个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

  5. stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2 px 宽，黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

  6. 关闭标签的作用是关闭 SVG 元素和文档本身。

注意：所有的开启标签必须有关闭标签！

在 HTML 中嵌入 SVG 图像

除了通过浏览器直接打开 SVG 文件，我们还可以将 SVG 图像嵌入到 HTML 代码里面，示例如下：

<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>

或者将 img 标签的 src 属性设置为一个 SVG 文件的路径，如下：

<body>
    <p>Lorem ipsum dolor sit amet.</p>
    <img src="./1.svg" alt="">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>

SVG 绘制简单图形

SVG 有一些预定义的形状元素，可被开发者使用和操作：

矩形：rect
圆形：circle
椭圆：ellipse
线：line
折线：polyline
多边形：polygon
路径：path

这里只介绍了一些简单的 SVG 图形，更多内容可以参阅：http://www.runoob.com/svg/svg-tutorial.html

SVG 矩形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>    
</svg>

代码说明：

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度。

  • style 属性用来定义 css 属性。

  • css 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。

  • css 的 stroke-width 属性定义矩形边框的宽度。

  • css 的 stroke 属性定义矩形边框的颜色。

SVG 圆形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

代码说明：

  • cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)。

  • r 属性定义圆的半径。

SVG 椭圆

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

代码说明：

  • cx 属性定义圆点的 x 坐标。

  • cy 属性定义圆点的 y 坐标。

  • rx 属性定义水平半径。

  • ry 属性定义垂直半径。

SVG 线条

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

代码说明：

  • x1 属性在 x 轴定义线条的开始。

  • y1 属性在 y 轴定义线条的开始。

  • x2 属性在 x 轴定义线条的结束。

  • y2 属性在 y 轴定义线条的结束。

SVG 折线

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
</svg>

代码说明：

  • points 属性定义折线中每个点的 x 和 y 坐标。

SVG 多边形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
</svg>

SVG 路径

<path> 标签用来定义路径。下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 150 L150 350 L350 350 Z" />
</svg>

上面的例子定义了一条路径，它开始于位置（250,150），到达位置（150,350），然后从那里开始到（350, 350），最后在（250,150）关闭路径。

SVG 文本

使用<text>元素来定义文本。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" fill="red">I love SVG</text>
</svg>

SVG 滤镜

在 SVG 中，可用的滤镜如下：

  • feBlend

  • feColorMatrix

  • feComponentTransfer

  • feComposite

  • feConvolveMatrix

  • feDiffuseLighting

  • feDisplacementMap

  • feFlood

  • feGaussianBlur

  • feImage

  • feMerge

  • feMorphology

  • feOffset

  • feSpecularLighting

  • feTile

  • feTurbulence

  • feDistantLight

  • fePointLight

  • feSpotLight

注：可以在每个 SVG 元素上使用多个滤镜！

下面是关于高斯模糊的一个具体示例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
    </defs>
    <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

代码说明：

  • <filter>标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）。

  • filter:url属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用#字符。

  • 滤镜效果是通过<feGaussianBlur>标签进行定义的。fe 后缀可用于所有的滤镜。

  • <feGaussianBlur>标签的 stdDeviation 属性可定义模糊的程度。

  • in="SourceGraphic" 这个部分定义了由整个图像创建效果。

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。在 SVG 中，有 2 种主要的渐变类型，分别为线性渐变和放射性渐变。

注：SVG 渐变必须在<defs>标签中进行定义。该标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

线性渐变

<linearGradient>可用来定义 SVG 的线性渐变。<linearGradient>标签必须嵌套在<defs>的内部。

线性渐变可被定义为水平、垂直或角形的渐变：

  • 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变。

  • 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变。

  • 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </linearGradient>
    </defs>
    <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>

代码说明：

  • <linearGradient>标签的 id 属性可为渐变定义一个唯一的名称。

  • fill:url(#orange_red)属性把 ellipse 元素链接到此渐变。

  • <linearGradient>标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置。

  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset 属性用来定义渐变的开始和结束位置。

径向渐变

<radialGradient>用来定义放射性渐变。<radialGradient>标签必须嵌套在<defs>中。

具体示例如下：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
​
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
        </radialGradient>
    </defs>
    <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>

代码说明：

  • <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称。

  • fill:url(#grey_blue)属性把 ellipse 元素链接到此渐变。

  • cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈。

  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。

  • offset 属性用来定义渐变的开始和结束位置。

至此，我们就将 SVG 中的基本绘图知识介绍完毕。

更多关于使用 SVG 绘制图像的内容，可以参阅：http://www.w3school.com.cn/svg/svg_examples.asp

总结

  1. HTML 5 中拖放元素变为了标准的一部分，通过新提供的 API 可以对任何元素实现拖放。

  2. 多媒体 API 允许使用 JavaScript 来控制音频和视频的播放。

  3. Web Storage API 允许本地存储数据，存储的方式类似于 cookie 的键值对，但是没有大小的限制。

  4. Canvas 元素可以用来在网页上配合 JavaScript 动态地绘制图形与文本。

  5. 在 Canvas 出现以前，很长一段时间都是使用 SVG 进行的图形绘制。

kevin661996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVG精髓第二版中英文对照
01-08
本书还为经验丰富的设计师准备了6个附录，解释了XML标记和CSS样式等基本概念，因此即使你没有网页设计的经验，也可以开始学习SVG。 通过阅读本书，你将能够： 为网页创建高质量、高分辨率的图形； 创建通过搜索引擎...
svg学习笔记
希望我快乐
10-21 269
standalone：规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用，standalone=“no” 意味着 SVG 文档会引用一个外部文件 version：定义所使用的 SVG 版本 xmlns：定义 SVG 命名空间 SVG 文件可通过以下标签嵌入 HTML 文档： <embed>、<object> 或者 <iframe> SVG的代码可以直接...
SVG文档语法结构
calm_agan的专栏
04-25 1万+
<br />SVG 语法结构说明<br />文档说明<br />版本<br />日期<br />作者<br />说明<br />1.0<br />2006.1.29<br />很少想起你<br />第 1 页 共 23 页<br />SVG 语法结构说明<br />SVG语法结构<br />一、SVG文档结构格式（为了方便说明，在文中加入标号和冒号；为了方便阅读，加了超链接）：<br />1: <?xml version=“1.0” encoding=“UTF-8” standalone=“no”?><br
SVG 标签
guoqkmiss的博客
09-27 5406
一、rect 矩形 属性 rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性 CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的 stroke-width 属性定义矩形边框的宽度 CSS 的 stroke 属性定义矩形边框的颜色 x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0p
网页中使用 SVG
Code Writers
12-20 1615
技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~如果你还知道其他方法，可以在评论区补充~在写本文时，我推荐使用 内嵌到 HTML 的方式来做日常开发。其他方式按照你实际需求去使用即可。最后的 embed 和 object 这两种方式可以当做备用方案去使用。
java-为什么在应用Fe复合材料时图纸会有所下降？如何在SVG中实现多个-feComposite操作？
weixin_44109689的博客
12-26 217
我试图在路径元素上实现多个复合操作. 但是我没有得到期望的输出.这是我的努力 <svg xmlns="http://www.w3.org/2000/svg" style="left: 0px; top: 0px; width: 1599px; height: 888px; position: absolute;"> <defs> &l...
个重要的HTML面试题及答案.docx
12-20
本文将详细讲解HTML5面试题及答案，涵盖了HTML5的基本概念、HTML5中的新特性、Canvas和SVG图形的区别、CSS选择器、Web Workers、本地存储等多个方面。 一、HTML5的基本概念 * HTML5是什么？HTML5是最新的HTML标准...
curso-de-svg:我的SVG课程内容
04-28
本课程旨在从SVG的基本概念到最高级的内容，使您能够基本创建所需的SVG。 该课程将以带有简短视频的小模块进行开发，从而促进学生的学习和发展，始终旨在为工作实践提供一个简单，简洁且相当实用的教学方法。 在...
Symbian S60v5 编程中的程序图标更换问题
08-31
这个换图标的问题也是折腾了我挺久一段时间，非常郁闷，不就换个图标嘛，想当年大学时在MFC编程中，多么简单的一件事件，在Symbian下却搞了很久，在网上查了很久，发现基本都是说第三版或者是Anna下换图标的方式，...
13.SVG过滤器用来给SVG图形添加特效
liuhao9999的博客
03-28 511
SVG 过滤器元素 SVG过滤器（也称为滤镜）用来给SVG图形添加特效，和PS软件中的滤镜效果类似。SVG中可用的过滤器元素包括： <feBlend> - 图片混合 <feColorMatrix> - 颜色变换 <feComponentTransfer> <feComposite> - 图片合成 <feConvolveMatrix> - 卷积变换 <feDiffuseLighting> - 散射光 <feDispl
svg简单应用
04-28
总结了几个常见的svg用法的小例子。
总结一下svg常用的操作
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
07-08 300
定义 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 使用方式 1、直接插入网页 <!DOCTYPE html> <html> <head></head> <body> <svg id="mysvg" xmlns="http://www.w
SVG 详解（二）基本概念
青岑的博客
04-02 4191
SVG 实例 // 一个 SVG 文件 &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg width="1
SVG 入门 及 嵌入HTML的7种方式
热门推荐
司马懿的西山居
11-25 3万+
SVG简介SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。SVG与其他图像格式相比，SVG的优势在于 SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放
SVG的常用元素和动画运用
不怕麻烦的鹿丸的博客
07-04 811
SVG的动画运用
数据可视化 SVG （一）
weixin_56663198的博客
03-13 642
1 邂逅SVG和初体验 2 网格和坐标系 3 视口和视图框 4 绘制形状和路径 5 绘制文字和图片 6 SVG分组和复用 7 填充和边
SVG基础用法
myx20220713的博客
07-18 1560
​SVG（Scalable Vector Graphics） : 可缩放矢量图形,使用 XML 格式定义图像。可以以一种简洁、可移植的形式表示图形信息，目前大部分浏览器都显示SVG图片，IE8不支持SVG。 ​
h5学习笔记之svg绘图
qq_39773416的博客
09-08 904
一、svg的引入方式 如代码： <div id="box"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > //这里是引入svg代码 <circle cx="250" cy="250" r="100" fill="red"&gt...
SVG的使用
weixin_72101182的博客
07-16 245
SVG基础应用
简单实现svg滚轮的缩放demo
最新发布
05-02
SVG是一种XML格式的矢量图形标准，支持无限的缩放和旋转，并完美呈现在任何大小的屏幕上。为了实现SVG滚轮的缩放，需要在SVG元素中添加一个事件监听器，以便捕获滚轮事件并执行相应的操作。 首先，需要在SVG元素上添加一个事件监听器，以便捕获滚轮事件。这可以通过添加一个onwheel属性来实现。例如： <svg onwheel="zoom(event)"> ... </svg> 其中，zoom是一个JavaScript函数，它将在滚轮事件触发时执行。 接下来，在zoom函数中，我们可以获取滚轮事件对象并计算新的缩放比例。可以使用event.deltaY属性来获取滚轮滚动方向。如果deltaY的值是正数，这意味着向下滚动，需要将图像缩小。反之，如果deltaY的值是负数，这意味着向上滚动，需要将图像放大。可以通过将当前缩放比例乘以一个固定因子来实现缩放。例如： function zoom(event) { var delta = event.deltaY > 0 ? -0.1 : 0.1; // 根据滚轮方向计算缩放因子 var svg = event.target.closest('svg'); var viewBox = svg.viewBox.baseVal; var newWidth = viewBox.width * (1 + delta); var newHeight = viewBox.height * (1 + delta); viewBox.width = newWidth; viewBox.height = newHeight; } 最后，在zoom函数中需要更新视图框的宽度和高度，以便实现缩放。这可以通过修改svg.viewBox.baseVal属性来实现。 这样，我们就可以简单地实现SVG滚轮缩放的demo。当用户滚动滚轮时，图像将根据滚动方向缩小或放大。通过调整缩放因子，可以控制缩放的速度。这是一个简单但非常实用的SVG交互技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值