- 综合排序
- 最热优先
- 最新优先
- 来自专栏Android知识点总结
SVG绘制星空效果
主要代码： 代码详见GitHub：https://github.com/toly1994328/svg-night： svg星空 <! background: #001122; line-height: 0; font-size: 0; } </style> <body> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="main-svg" viewBox="-400 -300 <circle cx="0" cy="0" r="2"></circle> </clipPath> <polygon points="0 0 <em>5</em> 50 -<em>5</em> 50" fill="url(#tower)"> </polygon> <ellipse cx="0" cy="0" rx="300" ry="
1.7K30发布于 2018-09-26 - 来自专栏大前端（横向跨端 & 纵向全栈）
SVG滤镜波浪动画效果
今天给大家分享一个用SVG实现的滤镜波浪动画效果，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <! charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG 滤镜波浪动画效果</title> <style> * { font-family: '微软雅黑', sans-serif; box-sizing transition: 0.5s; } p{ text-align: justify; } svg x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2"> <animate attributeName="baseFrequency
1.4K20发布于 2020-11-26 - 来自专栏Android开发
Android利用SVG实现动画效果
前言 在之前一篇文章中利用drawLine实现了线条动画的效果，然后在大佬的介绍下查看了TrimPathStart/End，感觉有必要写一篇文章。 192 l192 0 z" android:strokeWidth="3" android:strokeColor="#a2d7dc"/> </vector> 看看大致的动画效果 实际绘制效果： 三、动画效果的实现 1.在bulid.gradle(Module:app)中增加对vectorDrawables的支持。 android:animation="@animator/你的动画名称" android:name="start"></target> </animated-vector> 5. 四、拓展工具 svg下载：阿里图库 svg转换为VectorDrawable工具：http://inloop.github.io/svg2android/
44100编辑于 2025-06-12 - 来自专栏grain先森
前端-SVG 实现动态模糊动画效果
SVG动态模糊效果，并将其应用于HTML元素的常规JS或CSS动画。 在线演示（http://www.html5tricks.com/demo/html5-svg-motion-blur-effect/index.html） 源码下载（http://www.html5tricks.com /html5-svg-motion-blur-effect.html） 动态模糊是静止图像或一系列图像（如电影或动画）中快速移动物体的明显图像拖尾。 ——维基百科上对动态模糊的介绍 在这篇文章中，我们将介绍如何对水平或垂直的转换制作出类似的动态模糊效果。 注意：这种效果非常实用，但只有一些现代浏览器才支持。 为了对动画应用动态模糊效果，我们需要在每个帧中根据对象的速度和它移动的方向应用方向模糊。 ? 那么，怎么才能产生这种效果呢？
2.9K31发布于 2019-03-29 HTML5 内联 SVG
HTML5 支持内联使用 SVG 图像，使得 SVG 可以直接嵌入到 HTML 页面中，而不需要引用外部文件。这为网页设计和开发带来了更大的灵活性，允许开发者直接操作图形，并且在响应式布局中表现优秀。 动画和交互SVG 支持动画效果，可以使用 CSS 动画和 SVG 动画元素，如 <animate> 和 <animateTransform>。 5. SVG 与 JavaScript 交互你可以通过 JavaScript 操作和控制 SVG 图形，实现更复杂的交互和动画效果。 总结HTML5 的内联 SVG 提供了一种强大的方式来在网页中展示图形和动画。 SVG 在现代网页设计中越来越重要，尤其在需要响应式图形和动态效果时。https://www.52runoob.com/archives/5091
57810编辑于 2025-08-01- 来自专栏javascript趣味编程
css animation配合SVG制作能量流动效果
原文： https://segmentfault.com/a/1190000039283720 最终效果如下: 动画分成两步 制定运行轨迹 创建DOM并按照轨迹动画 制定运行轨迹 我们先要画一条底部的淡蓝色半透明路劲做为能量流动的管道 这里用SVG的path去做(其实这里可以直接用背景图), 代码如下: <! -- 代码是用react写的, 删除了遍历以及部分代码 --> <svg> <! -- 这里要保证盒子跟SVG的盒子位置重合,宽高一致,这样路径点才能一致 -->
<! -- 这里遍历N个div,让每一个div都按照offsetPath也就是svg内path的d的值进行流动 --> <!4.7K30编辑于 2021-12-16来自专栏京程一灯一步步教你用实现HTML5 SVG动画效果
正文共：3876 字 11 图 预计阅读时间： 17 分钟 翻译：疯狂的技术宅 原文：https://www.smashingmagazine.com/2019/01/html5-svg-fill-animation-css3 本文介绍了HTML5 SVG中的circle 元素，它的stroke属性，以及如何使用CSS变量以及用 Vanilla JavaScript 为它们设置动画。 width="84" height="84" class="circle__svg"> 5 <circle cx="41" cy="41" r="38" class="circle__ stroke-dasharray 和 stroke-dashoffset 属性 为了产生填充<em>效果</em>，我们将 stroke-dasharray 设置为圆周长度，以便它所有长度都能充满其冲刺范围而不留间隙。 width="84" height="84" class="circle__<em>svg</em>"> 5 <circle cx="41" cy="41" r="38" class="circle__
2.9K20发布于 2019-03-27HTML 5 Canvas vs. SVG
可扩展性Canvas可扩展性：由于是基于像素绘制，图形放大或缩小时会出现失真，无法像 SVG 那样保持清晰。适用场景：适合图像处理、游戏、动态效果等，尤其是对质量要求不高或不需要无损缩放的场景。 SVG可扩展性：矢量图形可以无损缩放，适用于需要在各种设备和屏幕尺寸下保持清晰的图形（如图标、插图、数据可视化）。适用场景：适合图标、可伸缩的图形、响应式设计等场景。5. SVG样式和动画：可以直接使用 CSS 控制 SVG 元素的样式和动画，也可以通过 JavaScript 操作。 由于每个图形元素都有独立的 DOM 节点，因此动画效果可以通过 CSS 动画或 JavaScript 动态应用。 动态效果：如粒子效果、图像处理、实时图形。高性能要求：适合大规模动态绘制和复杂的图形操作。SVG 适用场景矢量图标：如网站图标、响应式设计中的图形。数据可视化：图表、流程图等。
26910编辑于 2025-08-01来自专栏程序员的诗和远方tips-解决base标签造成SVG效果失效
之前写了使用SVG实现一个骚气的圆环： 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来，原来是html base标签和内联SVG同时使用引起的一个坑，略偏，记录一下。 解决问题 base标签看起来是那么的美好，简单粗暴，但是html里面内嵌了SVG之后，渐变圆环的效果就出不来了，纳尼?! marker', 'marker-start', 'marker-mid', 'marker-end', 'mask', 'stroke’] 参考 http://www.w3school.com.cn/html5/ html5_base.asp https://github.com/angular/angular.js/issues/8934 http://stackoverflow.com/questions/18259032 /using-base-tag-on-a-page-that-contains-svg-marker-elements-fails-to-render-marke
1.3K50发布于 2018-05-02来自专栏前端进阶交流一篇文章带你了解SVG 文本效果
</html> 运行后效果如下: ? > 运行后效果如下: ? > </body> </html> 运行后效果如下: ? I love SVG</textPath> </text> </svg> </body> </html> 运行效果如下： ? 七、总结 本文基于Html基础，详细的介绍了SVG中常见的文本效果，如何变换文字，如何在文本，如何添加文字超链接等等。
1.6K30发布于 2021-04-13【教程】svg文字动画效果 - 路径加载+加粗渐显
→ 创建轮廓 就可以创建出文字路径，但是没办法变成单一路径，只能围绕文字轮廓进行加载效果。 代码内容介绍 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 120"> xmlns指定了 SVG 的命名空间，确保浏览器能够正确解析 SVG 元素。 viewBox定义了 SVG 的视口范围，这里是从(0, 0)到(750, 120)，决定了 SVG 内部图形的显示区域和比例。 动画关键帧： dash动画：控制路径的绘制，从stroke-dashoffset为路径长度加 1 像素到 0，实现路径的渐显效果。
44910编辑于 2025-07-03来自专栏centosDaiHTML5(七)——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来自专栏centosDaiHTML5(七)——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来自专栏攻城狮与产品喵【HTML效果】html页面svg图片格式的展示
HTML代码教程，网站页面效果代码html调整，以下龙腾飞网络科技-小吴在建站实操中笔记记录，建站教程保存使用非常方便： 【HTML建站教程】 html页面svg图片格式的展示 本地模板中能够展示： < img src="images/cd-icon-picture.<em>svg</em>" alt="Picture"> 上传到服务器上需要修改成： <svg><image xlink:href="images/cd-icon-picture.<em>svg</em> " alt="Picture"></svg> 同时css文件需要将 .cd-timeline-img img { 修改成： .cd-timeline-img svg {
93600编辑于 2025-03-13来自专栏centosDaiHTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline 还可以实现更复杂的效果，我们就开始学习 path 如何应用。 说明 html 把 path 当作普通的 html 标签解析了，发现并不认识该标签，所以页面没有任何效果，此时我们需要介绍一个新的创建元素方法。 100,100) " stroke="black" stroke-width="1" fill="none"></path> 上述属性可以分为两类： 只能为属性 - 决定图形或路径形状的 可以放样式 - 视觉上的效果 如 troke、fill等是控制视觉上的效果，这样的属性可以放入 style 样式中。
3.3K50发布于 2021-10-01来自专栏centosDaiHTML5（十）——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 依赖于分辨率。 2.2、操作方面讲 canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg
3.9K30发布于 2021-10-01来自专栏centosDaiHTML5（十）——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 依赖于分辨率。 2.2、操作方面讲 canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg
1.9K20编辑于 2021-11-30来自专栏centosDaiHTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline 还可以实现更复杂的效果，我们就开始学习 path 如何应用。 说明 html 把 path 当作普通的 html 标签解析了，发现并不认识该标签，所以页面没有任何效果，此时我们需要介绍一个新的创建元素方法。 100,100) " stroke="black" stroke-width="1" fill="none"></path> 上述属性可以分为两类： 只能为属性 - 决定图形或路径形状的 可以放样式 - 视觉上的效果 如 troke、fill等是控制视觉上的效果，这样的属性可以放入 style 样式中。
4K50发布于 2021-09-30来自专栏centosDaiHTML5（十）——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 依赖于分辨率。 2.2、操作方面讲 canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg
1.9K50发布于 2021-09-30来自专栏centosDaiHTML5(九)——超强的 SVG 动画
1.1、set set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。 ，实现单属性的过渡效果。 1.4、animateTransform 实现transform变换动画效果，与css3的transform变换类似。实现平移、旋转、缩放等效果。 给SVG元素添加事件方法与普通元素一样，可以只用on+事件名 或者addEventListener添加。 eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。 stroke="black" stroke-width="5"></line> </svg> <script> window.onload = function(){ var line
4.7K40发布于 2021-09-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号