随笔分类 -  svg

svg 画地图
摘要:下载一个svgDeveloper软件,破解版下载 1、首先找一张地图作为绘制模板;(当然你也可以自己画,不准确怪我咯!) 2、新建svg文件:File --> New --> svg 点击ok; 3、修改svg画布大小,和使用的地图模板一致; 4、点击图片按钮,然后将鼠标移到画布左上角,一直拉到右下 阅读全文

posted @ 2020-03-31 13:13 dawn888 阅读(1052) 评论(0) 推荐(0) 编辑

使用SVGDeveloper画svg地图详细过程
摘要:使用步骤 1. 安装svg 2. 具体操作 1. 打开svg,点击file ,new,默认svg,点击ok 显示界面如下: 然后点击image 把鼠标放到代码下面的的桌面上,鼠标箭头会变成一个十字,然后点击桌布,弹出窗口,让选择一个图片: 刚出来的时候,桌布上只能看到一个框框: 然后,右键桌布,在菜 阅读全文

posted @ 2020-03-31 13:05 dawn888 阅读(2372) 评论(0) 推荐(1) 编辑

用SVGDeveloper制作svg地图
摘要:项目中需要实现巴蜀地区图,并且将其分为川东、川西、川南、川北四个区域,鼠标悬浮对应区域的区块改变颜色。经过网上查询资料,并未找到现成的区域图,于是就利用SVGDeveloper工具绘制。 一、绘制地图 1、首先找一张地图作为绘制模板; 2、新建svg文件:File --> New --> svg 点 阅读全文

posted @ 2020-03-31 12:59 dawn888 阅读(758) 评论(0) 推荐(0) 编辑

使用snapjs实现svg路径描边动画
摘要:一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然就发现了svg,他有两个神奇属性stroke-dasharray(控制虚线和空白大小)和stroke 阅读全文

posted @ 2020-03-31 11:25 dawn888 阅读(938) 评论(0) 推荐(0) 编辑

d3操作svg路径动画,及dom移动
摘要:图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站https://www.vectorizer.io/上生成path路径 2,以下是完整代码及注释 <!DO 阅读全文

posted @ 2020-03-31 11:21 dawn888 阅读(1618) 评论(0) 推荐(0) 编辑

新时代前端必备神器 Snapjs之弹动效果
摘要:有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者。前端不光是 Angularjs 了,这时候再不学 SVG 就晚了!(如果你只会 jQuery 就当我没说。。。)这里我就给大家分享一个前几天在别处看到的一个高大上的 SVG 效果,左边菜单弹出来会动动弹的说,链接点这里。 当时我就震惊了,今天抽 阅读全文

posted @ 2020-03-31 11:19 dawn888 阅读(777) 评论(0) 推荐(0) 编辑

玩转SVG线条动画
摘要:在上一节的《SVG线条动画实现原理》一文中,了解了SVG中线动画是怎么做的。在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度(最好是大于其长度,可以通过.getTotalL 阅读全文

posted @ 2020-03-31 10:03 dawn888 阅读(980) 评论(0) 推荐(0) 编辑

svg文字与图像
摘要:摘要: svg与canvas一样都可以将文本和图像放在画布中,制作出不一样的效果。下面是如何使用svg来渲染文本与图像。 简介: SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。尽管 阅读全文

posted @ 2020-03-18 17:56 dawn888 阅读(638) 评论(0) 推荐(0) 编辑

记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
摘要:项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的element-ui表格,前台进行分页,不依赖后台,下面记录一下svg的平移 function tr 阅读全文

posted @ 2020-03-13 13:12 dawn888 阅读(922) 评论(0) 推荐(0) 编辑

d3限制范围缩放和平移升级到版本4
摘要:感谢您提供帮助以更新下面的代码以在版本4中工作。我已将zoom.behaviour更改为d3.zoom,但我不清楚所需的其他更改。看起来比v3还要复杂! <!DOCTYPE html> <html> <head> <!-- <script type="text/javascript" src="ht 阅读全文

posted @ 2020-03-13 11:13 dawn888 阅读(1247) 评论(0) 推荐(0) 编辑

d3.js v4曲线图的拖拽功能实现Zoom
摘要:zoom缩放案例 源码:https://github.com/HK-Kevin/d...;demo:https://hk-kevin.github.io/d3...; 原理:通过zoom事件来重新绘制x轴scale,同时获得此时scale,在zoom事件的时候调用函数,将每个数据点的xScale重新 阅读全文

posted @ 2020-03-13 10:08 dawn888 阅读(1308) 评论(0) 推荐(0) 编辑

Vue + d3.js实现在地图上选点
摘要:需求:用户在地图上单击选点,页面获取到具体坐标并返回。 首先比较重要的是Vue中的$nextTick,因为vue是异步更新的,如果是想打开Dialog或者是其他操作dom后才加载地图,使用nextTick可以保证在dom加载之后进行加载。 this.$nextTick(() => { this.lo 阅读全文

posted @ 2020-03-12 23:23 dawn888 阅读(1575) 评论(0) 推荐(0) 编辑

vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置
摘要:<div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="500px"> </svg> </div> methods:{ svgLoad(){ var ming = 'http: 阅读全文

posted @ 2020-03-12 23:11 dawn888 阅读(1860) 评论(0) 推荐(0) 编辑

D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)
摘要:我使用D3库来创建绘图应用程序。 我需要在用户单击的坐标上绘制对象(为了简单起见)。问题是当用户使用平移&缩放和移动视口。然后对象是错误的位置的地方(我想问题是事件坐标是相对于svg元素而不是g,所以他们是计算没有适当的转换)。 < pre> $('svg')。on('click',function 阅读全文

posted @ 2020-03-12 22:48 dawn888 阅读(684) 评论(0) 推荐(0) 编辑

svg如何设置中心点进行缩放
摘要:中心点设置:x = x+width/2 y=y+height/2缩放开始前后需要变换对应的位置,直接举例:<rect x="110" y="100" width="120" height="90" data-svg="gltransform_tcwanimate" transform="transl 阅读全文

posted @ 2020-03-12 22:36 dawn888 阅读(2034) 评论(0) 推荐(0) 编辑

SVG案例:动态去创建元素createElementNS
摘要:案例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background:#000; } #demo1{ width:780px; height 阅读全文

posted @ 2020-03-12 22:20 dawn888 阅读(2799) 评论(0) 推荐(1) 编辑

SVG 案例:动态去创建分支节点,当鼠标经过某个节点时,分支线会高亮
摘要:css: <style> #div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hidden;} body{ background:black;} </style> html: <div id="d 阅读全文

posted @ 2020-03-12 22:12 dawn888 阅读(391) 评论(0) 推荐(0) 编辑

理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio
摘要:SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性:viewport, viewBox, 和 preserv 阅读全文

posted @ 2020-03-12 21:35 dawn888 阅读(682) 评论(0) 推荐(0) 编辑

理解SVG坐标系统和变换: 建立新视窗
摘要:在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中,我们将看一下我们如何这样做,以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活(或流动)。 这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中 阅读全文

posted @ 2020-03-12 21:34 dawn888 阅读(338) 评论(0) 推荐(0) 编辑

理解SVG坐标系统和变换: transform属性
摘要:SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识。 这是我写的SVG 阅读全文

posted @ 2020-03-12 21:32 dawn888 阅读(841) 评论(0) 推荐(0) 编辑

导航

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