svg/canvas
文章平均质量分 71
svg和canvas知识点记录!
页神建辑-思而后学
总是让我做自我简介,真不知道介绍什么好了~~~~~
展开
-
svg绘制pie元饼图练习
svg绘制pie饼图let arr=[300,200,100,240];let color=["red","#41e","blue"];let labels=["1","2","3","4"];let pieData = pieChart(arr,300,300,120,120,80,color,labels,200,100);console.log(pieData);document.getElementById("svg").appendChild(pieData); functi原创 2021-01-25 22:59:24 · 414 阅读 · 1 评论 -
svg-path圆点沿路径跟随动画
这里探究svg动画animateMotion使用,实现一个svg-path圆点沿路径跟随效果。下面是svg文件代码:<svg viewBox="0 0 120 120" fill="#3d1" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="motionPath" d="M 40 30 Q 10,9 20,100 L 100 80 L60 40" stroke="red" stroke-dasharray=原创 2021-01-18 23:20:32 · 1043 阅读 · 0 评论 -
svg属性d用法
svg属性d用法属性d实际上是一个字符串,表示一些路径描述。路径由一下指令组成:☆ Moveto☆ Lineto☆ Curveto☆ Arcto☆ ClosePathMovetoMoveto指令可以被想象成拎起绘图笔,落脚到另一处。在上一个点和这个指定点之间没有线段绘制。用一个Moveto命令开始一个路径是好的作法,因为如果没有一个初始化的Moveto,执行命令时开始点会是上一个操作发生过的地方,这样可能造成不确定的行为。句法:M x,y 在这里x和y是绝对坐标,分别代表水平坐标和垂直坐原创 2021-01-17 17:05:45 · 4542 阅读 · 0 评论 -
利用svg的path路径属性制作loading加载动画
利用svg-path属性制作加载旋转动画类似于此.container{ display: flex; align-items: center; justify-content: center; height: 400px;}.circle{ width:4px; height: 4px; background:red; border-radius: 50%;原创 2021-01-17 16:55:40 · 411 阅读 · 0 评论 -
svg基础知识学习与总结
svgsvg(Scalable Vector Graphics)是一种图像文件格式,是可缩放的矢量图像。svg是用XML定义的语言,用来描述二维矢量及矢量/栅格图像。不同于常规的jpg格式图像文件,缩放不会影响图像质量,不会失真模糊。并且可以直接用svg代码来描述图像,可以使用任何文字处理工具打开svg图像文件,随时可以插入到HTML中通过浏览器打开,通过代码编辑使svg图像具有交互功能。不多解释,看使用规范。svg标签:svg元素标签作用a定义超链接animate原创 2021-01-14 23:37:43 · 764 阅读 · 0 评论 -
分享记录一个svg的loading加载动画
分享记录一个svg的loading加载动画,如图所示,内圈由若干个灰色圆点构成,以较慢的速度旋转;外圈是一个长短交替的圆环进行旋转。 <svg class="load" viewBox="10 10 80 80"> <circle cx="50" cy="50" r="30" stroke="#eee" stroke-width="6" fill="none" stroke-dasharray="1,18" stroke-linecap="round" />原创 2020-08-05 21:22:30 · 348 阅读 · 0 评论