svg
神奇大叔
这个作者很懒,什么都没留下…
展开
-
svg 占比图利用定时器动态生成
因为定时器是异步回调函数,当主线程for循环完成后才会调用,次数变量为最后一次的值,利用闭包解决变量作用域代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...原创 2020-03-23 14:53:56 · 314 阅读 · 0 评论 -
svg 占比环形图
思路: 确定内外圈半径和中心坐标->按照中心坐标水平向右的两个坐标为起点-> 三角函数通过每部分占比计算出每部分扇形的四个角度存进数组里->遍历 数组画扇形->扇形通过path的M起点A画弧度和L后续点加Z首尾连接代码示例:<!DOCTYPE html><html lang="en"><head> <meta...原创 2020-03-23 11:47:33 · 1185 阅读 · 0 评论 -
svg 折线实现地图点击画线标记
思路: 将坐标转换成svg面板内的坐标 鼠标按下获取坐标并生成圆标记->鼠标移动动态获取坐标并给折线,实现线随鼠标移动->设置右键点击事件取消绘图即取消之前两种事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...原创 2020-03-22 17:20:19 · 1037 阅读 · 0 评论 -
svg 实现圆弹性特效,基于圆线圆案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-03-22 17:15:20 · 260 阅读 · 0 评论 -
svg 圈线圈案例
代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...原创 2020-03-21 20:56:08 · 207 阅读 · 0 评论 -
svg js动态生成svg标签
1、声明svg命名空间 let xx="http://www.w3.org/2000/svg";2、创建svg标签 let x=document.createElementNS(xx,'svg标签名称');3、操作svg标签 操作方法和dom标签一样 属性x.setAttribute('xxx','xxx'); 文本x.innerHTML='xxx'; ...封装创建标...原创 2020-03-21 21:38:07 · 3540 阅读 · 0 评论 -
svg path绘制弧等组合路径绘制
path<path d=''></path> d的值 可以用','或' '来分割,多个点会默认连接首尾填充颜色 M:起始坐标点 M坐标点1x 坐标点1y L:后续坐标点 L坐标点2x 坐标点2y L坐标点3x 坐标点3y ... H:水平绘制 在上一个坐标点的x坐标和该x坐标连线 H接x坐标(正负与坐标轴方向相同) 若已经用V了,按...原创 2020-03-23 10:19:15 · 1160 阅读 · 0 评论 -
svg 组合标签g以及位移变换操作、文本标签text、image标签
g组合标签 <g id='xx' stroke='xx' stroke-width='xx'> 组合标签,对其中的图案进行整体操作,设置的属性必须是所有的图形都有的,不是指g标签内所有图形共有的 </g> 共有属性: 样式 stroke、fill等样式 ...原创 2020-03-21 17:18:15 · 4261 阅读 · 0 评论 -
svg 圆、矩形、直线、折线、多边形
矩形不能直接像canvas获得只有边框色的,通过设置背景色获取 圆: <circle cx='100' cy='100' r='50' ></circle> cx/cy:圆心坐标 r:半径 矩形: <rect width='200' height='200' x='100' y='100' rx='30' ry='30'&g...原创 2020-03-21 16:23:11 · 1219 阅读 · 0 评论 -
svg 基本配置和使用
svg文件在浏览器打开就可查看在html中使用第一种 将svg文件按照src来引入使用 如<img src='xx/xx.svg' />第二种 在html页面使用svg标签(块级标签) <svg xmlns="http://www.w3.org/2000/svg"> ... &l...原创 2020-03-21 16:05:54 · 2058 阅读 · 0 评论