随笔分类 -  svg

摘要:svg 贝塞尔曲线画法 https://cubic-bezier.com/#.48,.46,.38,.8 <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline" key 阅读全文
posted @ 2023-01-05 12:25 newmiracle宇宙 阅读(79) 评论(0) 推荐(0) 编辑
摘要:<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="150" y="50" width= 阅读全文
posted @ 2023-01-02 21:04 newmiracle宇宙 阅读(44) 评论(0) 推荐(0) 编辑
摘要:svg放大缩小图片 <g transform="scale(1 1)"><animateTransform attributeName="transform" type="scale" values="1;1;1;1.2;1;1;1" dur="1.2s" repeatCount="indefini 阅读全文
posted @ 2021-09-08 15:45 newmiracle宇宙 阅读(395) 评论(0) 推荐(0) 编辑
摘要:svg点击效果不停的换图片 <div class="rich_media_content " id="js_content" style="visibility: visible;"> <section powered-by="yutustudio666" style="line-height: 0 阅读全文
posted @ 2021-09-08 15:17 newmiracle宇宙 阅读(576) 评论(0) 推荐(0) 编辑
摘要:自定义svg添加到秀米的方法 添加到这个标签下就对了 ps:一定要先保存再添加 不然会消失 阅读全文
posted @ 2021-09-08 10:24 newmiracle宇宙 阅读(1098) 评论(0) 推荐(0) 编辑
摘要:svg点击播放音乐 先微信后台添加音频 然后添加完把代码复制出来 <foreignObject x="0" y="50" width="100%" height="850"> <section style="opacity:0;transform: scale(50)translate(-924px 阅读全文
posted @ 2021-09-03 13:33 newmiracle宇宙 阅读(549) 评论(0) 推荐(0) 编辑
摘要:svg点击弹窗 <svg style="background-image: url(https://oss.knowway.cn/zhongliangct/hou2.jpg);background-repeat: no-repeat;background-size: 100% 100%;opacit 阅读全文
posted @ 2021-09-03 13:30 newmiracle宇宙 阅读(321) 评论(0) 推荐(0) 编辑
摘要:svg点击展开原理 <section style="line-height: 0;overflow:hidden;"> <section style="height:0;"><svg style="background-image: url(https://oss.knowway.cn/zhongl 阅读全文
posted @ 2021-09-03 10:51 newmiracle宇宙 阅读(440) 评论(0) 推荐(0) 编辑
摘要:svg描边渐变的方法 <svg id="svgConnections" > <defs> <linearGradient id="grad1" > <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop 阅读全文
posted @ 2021-04-23 16:23 newmiracle宇宙 阅读(495) 评论(0) 推荐(0) 编辑
摘要:<div style="width:100px; height:0px;background:#000"> <div style="width:100px; height:100px;background:#FF0"> </div> </div> <div style="width:100px; h 阅读全文
posted @ 2021-03-12 10:59 newmiracle宇宙 阅读(290) 评论(0) 推荐(0) 编辑
摘要:svg双重动画的方法 <p> <svg> <g> <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"> <animatetransform attr 阅读全文
posted @ 2021-03-03 12:22 newmiracle宇宙 阅读(598) 评论(0) 推荐(0) 编辑
摘要:<svg style="width:20%;" viewBox="0 0 320 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke=" 阅读全文
posted @ 2020-10-17 19:33 newmiracle宇宙 阅读(480) 评论(0) 推荐(0) 编辑
摘要:微信公众号推文svg点击交互的方法 先来个简单的例子 点击空白出出现文字 <section class="_135editor" > <svg width="420" height="700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: 阅读全文
posted @ 2020-05-01 21:02 newmiracle宇宙 阅读(3581) 评论(0) 推荐(0) 编辑
摘要:svg微信公众号推文实现点击显示答案 大家都知道微信公众号推文不能写js 所以不能加点击事件 其实是对的 确实不能写js 但是点击事件可以用svg写 svg代码可不会被微信隐蔽 为了能更好的理解 我写个简单的例子 点击变色 SMIL方式 <svg> <rect x="15" y="15" width 阅读全文
posted @ 2020-02-05 17:57 newmiracle宇宙 阅读(4469) 评论(0) 推荐(0) 编辑
摘要:svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> html,body{ width:100%; height:100%; } /*1000是线条(path)的长度 stroke-dasharray和st 阅读全文
posted @ 2019-11-17 15:36 newmiracle宇宙 阅读(313) 评论(0) 推荐(0) 编辑
摘要:<pre><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M73 65 L210 869 L415 339"/> </svg></pre> 3个点围成三角形 阅读全文
posted @ 2019-11-17 12:39 newmiracle宇宙 阅读(190) 评论(0) 推荐(0) 编辑
摘要:svg可视化制作工具直接ai里面用钢笔路径画好 然后右键建立复合路径 最后存储为svg即可 这样生成的svg就带path标签了 阅读全文
posted @ 2019-11-16 13:18 newmiracle宇宙 阅读(1372) 评论(0) 推荐(0) 编辑
摘要:html5 svg实现不规则形状图片触发事件<pre><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head> <body><svg xmlns="http://www.w 阅读全文
posted @ 2019-11-14 12:46 newmiracle宇宙 阅读(1451) 评论(0) 推荐(0) 编辑
摘要:svg自适应写法<pre><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head> <body> <div style="width:30%; height:3.6rem; 阅读全文
posted @ 2019-11-14 12:45 newmiracle宇宙 阅读(4957) 评论(0) 推荐(0) 编辑
摘要:css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <ti 阅读全文
posted @ 2019-11-13 20:28 newmiracle宇宙 阅读(342) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示