- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 </defs> <use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"></use> </g> </svg
1.6K30发布于 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 <feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap> </filter> </svg
1.4K20发布于 2020-11-26 - 来自专栏Android开发
Android利用SVG实现动画效果
前言 在之前一篇文章中利用drawLine实现了线条动画的效果，然后在大佬的介绍下查看了TrimPathStart/End，感觉有必要写一篇文章。 192 l192 0 z" android:strokeWidth="3" android:strokeColor="#a2d7dc"/> </vector> 看看大致的动画效果 （动画执行效果，顺序与绘制相反） 二、pathdata中参数的定义（三角形是怎么绘制出来的） 参数定义：大写的命令为绝对坐标命令；小写的命令为相对坐标命令 M=moveto 命令 M or m ，移动到新的位置 实际绘制效果： 三、动画效果的实现 1.在bulid.gradle(Module:app)中增加对vectorDrawables的支持。 四、拓展工具 svg下载：阿里图库 svg转换为VectorDrawable工具：http://inloop.github.io/svg2android/
41600编辑于 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，实现路径的渐显效果。
41710编辑于 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 {
92700编辑于 2025-03-13来自专栏Coco的专栏不借助 Javascript，利用 SVG 快速构建马赛克效果
那么，假设我们只有一张清晰的原图，又想利用 CSS 得到一个马赛克效果，可行么？ 我们只是想要个马赛克效果而已。 SVG 滤镜叠加实现马赛克效果 这就可以引出今天的主角了，SVG 滤镜，使用几层 SVG 滤镜的叠加，其实可以非常轻松的实现一个马赛克效果滤镜。 代码其实也非常的简单，SVG 定义一个滤镜，利用多层滤镜的叠加效果实现一个马赛克效果，然后，通过 CSS filter 引入，可以运用在任何元素上：
img { width: 300px; height: 300px; filter: url(#pixelate); } 这样，我们就得到了一个马赛克效果： 如果你只是想使用这个效果 当然，利用上述的两个实现图片马赛克技巧，我们还是可以用于制作一些简单的交互效果的，像是这样： 上述的 DEMO 和 SVG 滤镜的全部代码，你都可以在这两个 DEMO 中找到： CodePen Demo
1K20编辑于 2022-04-28来自专栏HTML5学堂SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。 今天先来说说SVG的基本知识以及创建SVG的基本方法。 SVG的支持程度 IE8-以及Android 2.3默认浏览器是不支持SVG的 对SVG的基本理解 可以把SVG想象成类似于HTML的图形，可以与其他浏览器技术，如JavaScript、CSS、DOM无缝集合 创建SVG图片 方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 <object data="XXX.<em>svg</em>" type="image/<em>svg</em>+xml" /> SVG文件的编辑 <svg version="1.1" baseProfile="full" xmlns="
5K80发布于 2018-03-12微信公众号编辑器SVG效果：顶图固定背景左右掉落换图制作教程，SVG效果大揭秘，让你告别老套排版
想为你的公众号文章增添引人注目的互动效果吗？今天介绍的这款顶图固定背景左右掉落换图SVG效果，能让你的主视觉图片在固定的背景上，以左右滑落的方式切换成另一张图，创造出极具视觉冲击力的动态体验。 这种效果非常适合用于产品对比、场景切换或悬念揭晓，能有效提升用户停留时间和点击互动率。一、效果展示与核心特点这款SVG互动效果的核心在于“顶图固定”与“底图掉落换图”的巧妙结合。 二、详细制作步骤第一步：添加SVG效果素材首先，在135编辑器或你常用的SVG编辑器的『互动效果』栏目下，找到【轮播】分类，然后选择【顶图固定底图左右掉落换图】这个素材，点击即可将其添加到文章编辑区域。 四、总结顶图固定底图左右掉落换图是公众号SVG排版中一种非常实用的高级互动效果。它通过简单的图层控制和动画设置，就能实现专业级的视觉动态，极大地丰富了微信图文的表现形式。 想亲手制作更多像“点击换图”、“滑动展开”、“重力感应”等酷炫的公众号SVG互动效果吗？强烈推荐你尝试专业的SVG编辑器。
13210编辑于 2026-03-04来自专栏码客SVG绘图-SVG.js
前言 本文是在SVG.js 3.0的前提上，和2.x的API不一致。 { SVG } from '@svgdotjs/svg.js' 简单示例 <! () // 创建使用该方法 var draw = SVG() var draw = SVG().addTo('#drawing') // 这个方法只能获取不能创建 var rect = SVG('#myRectId 20px); height: calc(100vh - 20px); background-color: #ffffff; } </style> </html> 效果 Defs也相当于定义，不同与Symbol，定义本身不能直接use，定义下的元素才能使用，要实现上面的效果还要用group把多个元素包起来。
7.3K71编辑于 2021-12-05来自专栏HTML5学堂SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。 今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。
5.1K170发布于 2018-03-12微信公众号编辑器SVG效果教程：自动播放GIF+点击展开图文，文章编辑告别单调排版，SVG高阶排版效果小白轻松学会
今天介绍的自动多张GIF图播放+点击展开SVG效果，能够先自动轮播多张动图吸引眼球，再通过点击触发展开更多精彩内容，是提升用户互动和内容深度的利器。 效果展示与应用场景这种公众号SVG互动效果非常适合以下场景：–产品多角度展示：自动轮播产品GIF动图，点击后展开详细图文介绍。–故事/内容分层：用动态GIF吸引用户，点击后展开完整故事或深度内容。 制作教程：四步实现GIF自动播放与点击展开第一步：添加SVG效果素材在135编辑器或其他SVG编辑器的『互动效果』栏目下，找到【点击】分类，选择【自动多张gif图播放+点击展开】素材，点击即可添加到编辑区域 在弹出的编辑区中，可以添加文字、图片、甚至其他SVG互动效果。在右侧上传展开后要显示的效果图或内容图。编辑完成后，点击【完成】确认。 想制作更多酷炫的公众号SVG互动效果，如点击换图、滑动展开、重力感应等？推荐使用SVG编辑器。
26310编辑于 2026-03-06来自专栏踏浪的文章SVG
rx：实现圆角效果时，圆角沿x轴的半径。 ry：实现圆角效果时，圆角沿y轴的半径。 ，但是需要提供的点很多，而且放大了效果也不好。 文本路径 - textPatch元素 这个比较有意思，效果也很酷，能做出很多的艺术效果；这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上 SVG坐标与变换 坐标系统 SVG存在两套坐标系统 实现单属性的动画过渡效果。 如果to,by,values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，规范上说是没有动画效果。
6.9K40发布于 2019-07-31来自专栏Czy‘s BlogSVG基础
SVG基础 SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。 DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg 该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-27来自专栏码客SVG绘图
前言 图形 SVG <svg id="test_1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width > SVG中 width/height 是图形的宽/高 viewBox="0 0 300 200" 是画布的属性 如上面的示例 画布尺寸比图形小，那么我们看到的画布中的图形就会同比例放大。 内部元素的定位也是相对于svg的。 > <body> <svg xmlns="http://www.w3.org/2000/svg" id="m_svg" xml:space="preserve = document.getElementById("m_svg"); m_svg.setAttributeNS(null, "onmousemove", "moveElement(evt
2.8K30编辑于 2021-12-05来自专栏杰的记事本SVG字体比IconFont更好用(SVG Sprite)
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg Just call it svg-defs.svg or something. ': ['svgs/*.svg'], } } } }, In the output file, svg-defs.svg, each icon (whatever paths and "icon shape-codepen"> <use xlink:href="/images/<em>svg</em>-defs.<em>svg</em>#shape-codepen"></use> </svg> This does SVG wins this one.
3.7K60发布于 2019-09-04</template> 遇到的一个小 bug: fill 颜色 尝试实现切换标签页的时候自动更改填充颜色来达到突出显示的效果 (dir) // 其他 svg loader 排除 icons 目录 } } 收工，效果如下 PS: vue.config.js 报 eslint 错误怎么办？来自专栏ZkeqVue | 使用 SVG sprite loader 来引入 svg
('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录 // config.module // .rule('svg-sprite (svg)(\?.*)? 而且每次都要写 <svg><use /></svg> 好麻烦，我们可不可以把它封装成一个组件呢？ 引入整个 svg 目录？ Statistics"/> </router-link>
3.9K20编辑于 2022-09-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号