- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="#fff"></polygon> </defs> <g id="real"> <g id </defs> <use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"></use> </g> </svg
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 Water Wave Text</h2>
挫折之花，绽放于与命运的抗衡。 Water Wave Text</h2>
挫折之花，绽放于与命运的抗衡。
1.4K20发布于 2020-11-26 - 来自专栏Android开发
Android利用SVG实现动画效果
前言 在之前一篇文章中利用drawLine实现了线条动画的效果，然后在大佬的介绍下查看了TrimPathStart/End，感觉有必要写一篇文章。 "/> </vector> 看看大致的动画效果（动画执行效果，顺序与绘制相反） 二、pathdata中参数的定义（三角形是怎么绘制出来的） 参数定义：大写的命令为绝对坐标命令；小写的命令为相对坐标命令 实际绘制效果： 三、动画效果的实现 1.在bulid.gradle(Module:app)中增加对vectorDrawables的支持。 //增加对vectorDrawables的支持 vectorDrawables.useSupportLibrary = true } 2.以上步骤画出的SVG图： <vector 四、拓展工具 svg下载：阿里图库 svg转换为VectorDrawable工具：http://inloop.github.io/svg2android/
44100编辑于 2025-06-12 - 来自专栏grain先森
前端-SVG 实现动态模糊动画效果
SVG动态模糊效果，并将其应用于HTML元素的常规JS或CSS动画。 ——维基百科上对动态模糊的介绍 在这篇文章中，我们将介绍如何对水平或垂直的转换制作出类似的动态模糊效果。 注意：这种效果非常实用，但只有一些现代浏览器才支持。 为了对动画应用动态模糊效果，我们需要在每个帧中根据对象的速度和它移动的方向应用方向模糊。 ? 那么，怎么才能产生这种效果呢？ 记住，此模糊滤镜只支持X或Y方向上的方向模糊，不能任意角度，因此你需要相应地规划好动画效果。 还有，改变模糊滤镜会影响与其相关联的所有对象，因此我们需要为将应用此效果的每个对象添加一个新的元素。 对于更复杂的拍摄，你可以考虑将动态模糊效果应用于多个对象，在没有动画时禁用模糊和速度计算，等等。 到这里本教程就结束了！ 再说一次，请注意，这种效果可能很耗费资源，所以你应该避免在大型对象上使用它。
2.9K31发布于 2019-03-29 - 来自专栏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来自专栏程序员的诗和远方tips-解决base标签造成SVG效果失效
之前写了使用SVG实现一个骚气的圆环： 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来，原来是html base标签和内联SVG同时使用引起的一个坑，略偏，记录一下。 解决问题 base标签看起来是那么的美好，简单粗暴，但是html里面内嵌了SVG之后，渐变圆环的效果就出不来了，纳尼?! 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来自专栏攻城狮与产品喵【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来自专栏林德熙的博客win10 uwp 显示SVG win2d 使用 svg
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg ="2" stroke-miterlimit="10" x1="11" y1="11" x2="16" y2="16"/> </g> </svg> 我们开始使用Image，但是没有显示 于是网上有一个库 安装Mntone.SvgForXaml，安装win2d 1.11.0 我们上面那个代码就是svg，我们使用ViewModel绑定，绑定内容是SvgDocument 自然我们需要写一个字符串去转换 x2=""16"" y2=""16""/> </g> </svg> "; Svg=SvgDocument.Parse(str); } 然后我们在我们的界面 /UWP/tree/master/uwp/src/ScalableVectorGraphic win2d 使用 svg 现在 win2d 支持 svg 1.1 ，直接在 win2d 使用svg请看下面代码
1.6K10发布于 2018-09-18来自专栏Coco的专栏不借助 Javascript，利用 SVG 快速构建马赛克效果
我们只是想要个马赛克效果而已。 SVG 滤镜叠加实现马赛克效果 这就可以引出今天的主角了，SVG 滤镜，使用几层 SVG 滤镜的叠加，其实可以非常轻松的实现一个马赛克效果滤镜。 代码其实也非常的简单，SVG 定义一个滤镜，利用多层滤镜的叠加效果实现一个马赛克效果，然后，通过 CSS filter 引入，可以运用在任何元素上：
<svg> <filter id="pixelate" x="0" y="0"> <feFlood x="4" y="4" height="<em>2</em>" width="<em>2</em>"/> < feComposite width="8" height="8"/> <feTile result="a"/> <feComposite in="SourceGraphic" in2=" 当然，利用上述的两个实现图片马赛克技巧，我们还是可以用于制作一些简单的交互效果的，像是这样： 上述的 DEMO 和 SVG 滤镜的全部代码，你都可以在这两个 DEMO 中找到： CodePen Demo
1K20编辑于 2022-04-28来自专栏听雨堂表格效果2
attr("cellSpacing","1").attr("cellPadding","0"); $("#tbl").attr("bgColor","#6699cc").attr("colSpan","2"
65580发布于 2018-01-23来自专栏HTML5学堂SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。 今天先来说说SVG的基本知识以及创建SVG的基本方法。 2、与像素无关，可以放大或者缩小，甚至打印成任意大小，图片质量不会改变。 创建SVG图片 方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 > 方法2 在HTML中直接使用SVG SVG - 示例demo <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <g
5K80发布于 2018-03-12微信公众号编辑器SVG效果：顶图固定背景左右掉落换图制作教程，SVG效果大揭秘，让你告别老套排版
想为你的公众号文章增添引人注目的互动效果吗？今天介绍的这款顶图固定背景左右掉落换图SVG效果，能让你的主视觉图片在固定的背景上，以左右滑落的方式切换成另一张图，创造出极具视觉冲击力的动态体验。 这种效果非常适合用于产品对比、场景切换或悬念揭晓，能有效提升用户停留时间和点击互动率。一、效果展示与核心特点这款SVG互动效果的核心在于“顶图固定”与“底图掉落换图”的巧妙结合。 二、详细制作步骤第一步：添加SVG效果素材首先，在135编辑器或你常用的SVG编辑器的『互动效果』栏目下，找到【轮播】分类，然后选择【顶图固定底图左右掉落换图】这个素材，点击即可将其添加到文章编辑区域。 2.切换图：顶层图掉落消失后，最终显示出来的图片。3.背景图：始终固定在底层、不参与动画的图片。上传图片后，你可以进行关键设置：–选择掉落方向：决定顶层图是向左滑动消失还是向右滑动消失。 想亲手制作更多像“点击换图”、“滑动展开”、“重力感应”等酷炫的公众号SVG互动效果吗？强烈推荐你尝试专业的SVG编辑器。
14910编辑于 2026-03-04来自专栏码客SVG绘图-SVG.js
前言 本文是在SVG.js 3.0的前提上，和2.x的API不一致。 move(0, 70) .fill("#ffe7f4") .stroke({ width: 1, color: "#f883c9" }); // 矩形 var r2 // 线 var line = draw .line(0, 0, 100, 60) .move(0, 410) .stroke({ width: 2, 20px); height: calc(100vh - 20px); background-color: #ffffff; } </style> </html> 效果 Defs也相当于定义，不同与Symbol，定义本身不能直接use，定义下的元素才能使用，要实现上面的效果还要用group把多个元素包起来。
7.3K71编辑于 2021-12-05微信公众号编辑器SVG效果教程：自动播放GIF+点击展开图文，文章编辑告别单调排版，SVG高阶排版效果小白轻松学会
效果展示与应用场景这种公众号SVG互动效果非常适合以下场景：–产品多角度展示：自动轮播产品GIF动图，点击后展开详细图文介绍。–故事/内容分层：用动态GIF吸引用户，点击后展开完整故事或深度内容。 制作教程：四步实现GIF自动播放与点击展开第一步：添加SVG效果素材在135编辑器或其他SVG编辑器的『互动效果』栏目下，找到【点击】分类，选择【自动多张gif图播放+点击展开】素材，点击即可添加到编辑区域 建议准备2-4张，确保动图大小和风格一致。设置触发热区：用鼠标拖动编辑区域中的“触发热区”（通常是一个半透明层），将其调整到GIF图播放区域上方合适的位置和大小。这里是用户点击触发展开的区域。 在弹出的编辑区中，可以添加文字、图片、甚至其他SVG互动效果。在右侧上传展开后要显示的效果图或内容图。编辑完成后，点击【完成】确认。 想制作更多酷炫的公众号SVG互动效果，如点击换图、滑动展开、重力感应等？推荐使用SVG编辑器。
37110编辑于 2026-03-06来自专栏HTML5学堂SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。 今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线 拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/> polyline - 折线 points
5.1K170发布于 2018-03-12来自专栏踏浪的文章SVG
rx：实现圆角效果时，圆角沿x轴的半径。 ry：实现圆角效果时，圆角沿y轴的半径。 每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：”0 0, 1 1, 2 2”。 每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：”0 0, 1 1, 2 2”。 S x2 y2, x y Q：二次贝塞尔曲线 Q x1 y1, x y T：三次贝赛尔曲线补充命令。与S有异曲同工之妙。T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。 文本路径 - textPatch元素 这个比较有意思，效果也很酷，能做出很多的艺术效果；这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上 SVG坐标与变换 坐标系统 SVG存在两套坐标系统
6.9K40发布于 2019-07-31来自专栏Czy‘s BlogSVG基础
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg standalone="no"意味着SVG文档会引用一个外部文件，此处是DTD文件。 第2和第3行引用了这个外部的SVG DTD。 该DTD位于http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd，该DTD位于W3C，含有所有允许的svg元素。 svg代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>，这是根元素，可以通过width和height属性可设置此SVG文档的宽度和高度，version属性可定义所使用的SVG版本， 较小文件 总体来讲，SVG文件比GIF和JPEG格式的文件要小很多，因而下载也很快。 超强显示效果 SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
3.3K20发布于 2020-08-27vue2 实现数字滚动效果，翻页效果
前言 最近大屏项目中有数值需要数值变化时有一个炸裂的效果，对用户来说明显一点，经过几番查找，自己又重新修改总结，发出下面文，防止下次遇到。 实现这种效果有两种方法： 第一种方法 参考文章：【vue2】实现数字纵向滚动效果（计时器效果） 第一种方法虽然实现了效果，但是数值变化整体都重新滚动了，不太好。 效果 新建文件FlipItem.vue <template> <div style=" display: inline-flex; justify-content: 这里我就没有封装也就copy了一个demo过来了，问题：1、我封装了首次接受数值时只有第一个数字滚动，<em>2</em>、页面首次渲染如果是三个数字，那么宽度就固定了。这时候传过来新值是四个字，可能就会出现内容超出。 80px; font-size: 54px; line-height: 41px; text-align: center; list-style: none; // color: #<em>2</em>d7cff
36210编辑于 2025-12-15
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号