- 综合排序
- 最热优先
- 最新优先
HTML5 内联 SVG
HTML5 支持内联使用 SVG 图像，使得 SVG 可以直接嵌入到 HTML 页面中，而不需要引用外部文件。这为网页设计和开发带来了更大的灵活性，允许开发者直接操作图形，并且在响应式布局中表现优秀。 内联 SVG 是指将 SVG 代码直接嵌入到 HTML 文档中，而不是通过
标签加载外部的 SVG 文件。1. stroke="black" stroke-width="3" fill="red" /></svg>php151 Bytes© 菜鸟-创作你的创作<svg>：定义一个 SVG 图形容器。 5. SVG 与 JavaScript 交互你可以通过 JavaScript 操作和控制 SVG 图形，实现更复杂的交互和动画效果。 总结HTML5 的内联 SVG 提供了一种强大的方式来在网页中展示图形和动画。
57810编辑于 2025-08-01- 来自专栏阮一峰的网络日志
SVG 图像入门教程
:5" /> </svg> 上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。 ="5" fill="silver"/> </svg> <ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素） <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="<em>5</em>" cy="<em>5</em>" r= "0" cy="105" /> <circle r="<em>5</em>" cx="90" cy="90" /> <circle r="<em>5</em>" cx="180" cy="60" /> < > <text x="-40" y="105" dy="<em>5</em>">$10</text> <text x="-40" y="0" dy="<em>5</em>">$80</text> </g
2.5K10发布于 2018-08-09 HTML 5 Canvas vs. SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="80" stroke SVG可扩展性：矢量图形可以无损缩放，适用于需要在各种设备和屏幕尺寸下保持清晰的图形（如图标、插图、数据可视化）。适用场景：适合图标、可伸缩的图形、响应式设计等场景。5. canvas.addEventListener("click", function(event) { // 处理点击事件});php66 Bytes© 菜鸟-创作你的创作SVG交互性：由于每个 SVG SVG样式和动画：可以直接使用 CSS 控制 SVG 元素的样式和动画，也可以通过 JavaScript 操作。 SVG可访问性：SVG 图形是基于 XML 的，因此可以包含 title、desc 等标签，使得它们能够更好地与屏幕阅读器等辅助技术兼容，具有更好的可访问性。8.
26910编辑于 2025-08-01- 来自专栏grain先森
前端-SVG 图像入门教程
:5" /> </svg> 上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="<em>5</em>" cy="<em>5</em>" r ="0" cy="105" /> <circle r="<em>5</em>" cx="90" cy="90" /> <circle r="<em>5</em>" cx="180" cy="60" /> " /> <text x="-40" y="105" dy="<em>5</em>">$10</text> <text x="-40" y="0" dy="<em>5</em>">$80</text> Graphics 3、Joseph Wegner, Learning SVG 4、biovisualize, Direct svg to canvas to png conversion 5、Tyler
3K30发布于 2019-03-29 - 来自专栏centosDai
HTML5(七)——SVG基础入门
声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。 一、为什么要学 SVG ? SVG 图像可以添加文本和事件，还可搜索，适合做地图。 SVG 是纯粹的 XML，不是 HTML5。 缺点：不推荐 html4 和 html 中使用，但 html5 支持。 优点：所有浏览器都支持，支持 html、html4 和 html5。 缺点：不允许使用脚本。 缺点：不推荐 html4 和 html 中使用，但 html5 支持。 2.2.4、html中嵌入： svg 标签直接插入 html 内容内，与其他标签用法一致。
2.5K30发布于 2021-11-26 - 来自专栏centosDai
HTML5(七)——SVG基础入门
声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。 一、为什么要学 SVG ? SVG 图像可以添加文本和事件，还可搜索，适合做地图。 SVG 是纯粹的 XML，不是 HTML5。 缺点：不推荐 html4 和 html 中使用，但 html5 支持。 优点：所有浏览器都支持，支持 html、html4 和 html5。 缺点：不允许使用脚本。 缺点：不推荐 html4 和 html 中使用，但 html5 支持。 2.2.4、html中嵌入： svg 标签直接插入 html 内容内，与其他标签用法一致。
3.5K10发布于 2021-09-30 - 来自专栏centosDai
HTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline <svg version="1.1" height="400" width="550" id="svg"></svg> <script > window.onload = function(){ 元素与SVG元素区别： 普通html元素可以使用两种方法： setAttribute(x,val) / getAttribute(x) obj.x SVG操作方法只有一种 setAttribute(x, <svg version="1.1" height="400" width="550" id="svg"></svg> <script > function d2a(n){ return Math.PI 点个关注，下篇解密 SVG 动画 ！
3.3K50发布于 2021-10-01 - 来自专栏centosDai
HTML5（十）——Canvas 与 SVG 区别
作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg 是由 XML 定义的，在 html 5 中 canvas 与 svg 看着相似，其实不同。 SVG svg 使用 XML 描述的2D图像。 svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。 svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。 二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。 所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。
3.9K30发布于 2021-10-01 - 来自专栏centosDai
HTML5（十）——Canvas 与 SVG 区别
作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg 是由 XML 定义的，在 html 5 中 canvas 与 svg 看着相似，其实不同。 SVG svg 使用 XML 描述的2D图像。 svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。 svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。 二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。 所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。
1.9K20编辑于 2021-11-30 - 来自专栏centosDai
HTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline <svg version="1.1" height="400" width="550" id="svg"></svg> <script > window.onload = function(){ 元素与SVG元素区别： 普通html元素可以使用两种方法： setAttribute(x,val) / getAttribute(x) obj.x SVG操作方法只有一种 setAttribute(x, <svg version="1.1" height="400" width="550" id="svg"></svg> <script > function d2a(n){ return Math.PI 点个关注，下篇解密 SVG 动画 ！
4K50发布于 2021-09-30 - 来自专栏centosDai
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ ： <animateMotion path="M 0 0 L 320 320" begin="4s" dur="2s"></animateMotion> path：定义路径，使用语法与《HTML5( 八)——SVG 之 path 详解》path的d属性一致。 给SVG元素添加事件方法与普通元素一样，可以只用on+事件名 或者addEventListener添加。 eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。 stroke="black" stroke-width="5"></line> </svg> <script> window.onload = function(){ var line
4.7K40发布于 2021-09-30 - 来自专栏centosDai
HTML5（十）——Canvas 与 SVG 区别
作为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg 是由 XML 定义的，在 html 5 中 canvas 与 svg 看着相似，其实不同。 SVG svg 使用 XML 描述的2D图像。 svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。 svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。 二、SVG与Canvas比较 svg 是一种矢量图，而 canvas 依赖于分辨率。 所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。 svg 支持事件处理器，而 canvas 不支持事件处理器。
1.9K50发布于 2021-09-30 - 来自专栏centosDai
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ ： <animateMotion path="M 0 0 L 320 320" begin="4s" dur="2s"></animateMotion> path：定义路径，使用语法与《HTML5( 八)——SVG 之 path 详解》path的d属性一致。 给SVG元素添加事件方法与普通元素一样，可以只用on+事件名 或者addEventListener添加。 eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。 stroke="black" stroke-width="5"></line> </svg> <script> window.onload = function(){ var line
4.6K30发布于 2021-10-01 - 来自专栏centosDai
HTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline <svg version="1.1" height="400" width="550" id="svg"></svg> <script > window.onload = function(){ let svg = document.getElementById("svg") let path = document.createElement("path") path.setAttribute 元素与SVG元素区别： 普通html元素可以使用两种方法： setAttribute(x,val) / getAttribute(x) obj.x SVG操作方法只有一种 setAttribute(x, <svg version="1.1" height="400" width="550" id="svg"></svg> <script > function d2a(n){ return Math.PI
3.8K20编辑于 2021-11-30 - 来自专栏centosDai
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ ： <animateMotion path="M 0 0 L 320 320" begin="4s" dur="2s"></animateMotion> path：定义路径，使用语法与《HTML5( 八)——SVG 之 path 详解》path的d属性一致。 给SVG元素添加事件方法与普通元素一样，可以只用on+事件名 或者addEventListener添加。 eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。 stroke="black" stroke-width="5"></line> </svg> <script> window.onload = function(){ var line
3.3K20编辑于 2021-11-30 - 来自专栏HTML5学堂
SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。 今天先来说说SVG的基本知识以及创建SVG的基本方法。 创建SVG图片 方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 </clipPath> <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="<em>5</em>px " /> </clipPath> <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="<em>5</em>px
5K80发布于 2018-03-12 - 来自专栏码客
SVG绘图-SVG.js
前言 本文是在SVG.js 3.0的前提上，和2.x的API不一致。 引用 <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/<em>svg</em>.js@3.0/dist/<em>svg</em>.min.js"></script> 或者 import { SVG } from '@svgdotjs/svg.js' 简单示例 <! () // 创建使用该方法 var draw = SVG() var draw = SVG().addTo('#drawing') // 这个方法只能获取不能创建 var rect = SVG('#myRectId ') // 创建图形 var circle = SVG('<circle>') // 转换dom为svgjs对象 var obj = SVG(node) 各种图形 <!
7.3K71编辑于 2021-12-05 - 来自专栏我分享我快乐
【案例】 HTML5 SVG图标按钮菜单特效
哈喽大家好，又到了每周二经典案例环节啦~ 今天段老师给同学们带来的是HTML5 SVG图标按钮菜单特效。 01脚本简介 HTML5 SVG图标按钮菜单特效是一款TweenMax基于svg绘制图标按钮点击展开多个图标菜单特效。 02效果展示 HTML5 SVG图标按钮菜单特效 ? 那就快戳下方视频学习吧~ 03教学视频 ▼ 视频内容 以上就是给同学们分享的HTML5 SVG图标按钮菜单特效的教学视频~聪明的你学会了吗? 本期教程源文件 https://pan.baidu.com/s/1KZ3zscosBV50yJEizYmaMg 提取码：a1mm
8.6K30发布于 2020-03-26 - 来自专栏拂晓风起
HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具
3、SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 简单例子： http://widgets.better2web.com/loader/ http://anthonyterrien.com/knob/ 非常好的学习资料： http://www.html5canvastutorials.com /tutorials/html5-canvas-tutorials-introduction/ 特点是： 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 Flash CC在支持Canvas方面也是很强大，已经集成到IDE中，可以直接新建HTML 5 canvas动画文档，也可以从原有的Flash动画导出 5、兼容性 PC浏览器实在多，直接看终端的浏览器吧， http://mobilehtml5.org/ ? ?
4.5K10发布于 2018-07-24 - 来自专栏HTML5学堂
SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。 今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 ="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" (0, 0) r 属性定义圆的半径 demo <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="<em>5</em>" cx 属性定义圆点的 x 坐标 cy 属性定义圆点的 y 坐标 rx 属性定义水平半径 ry 属性定义垂直半径 demo <ellipse cx="75" cy="75" rx="20" ry="<em>5</em>"
5.1K170发布于 2018-03-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号