由于path有自带的api可获得总长度,和某个长度返回的坐标。

var total = d.path.getTotalLength();//返回总长度
var point = d.path.getPointAtLength(num);//返回一个对象,包括x,y

 想着进行了line的位置找寻:

svg中《line》的路径上的点的位置找寻方法

//根据line的起始点坐标返回一个对象,得到线段的长度
function GetLineLength(x1,y1,x2,y2){
var obj ={};
obj.x = x1;
obj.y = y1;
obj.length = Math.sqrt((x2 - x1)*(x2 - x1) + (y2- y1)*(y2- y1));
obj.sin = (y1-y2)/obj.length;
obj.cos = (x1-x2)/obj.length;
return obj;
};
//根据上变的函数得到的对象,传入某一长度,返回此长度在line上的x,y的坐标
function GetLintPoint(obj,number){
var point = {};
point.x = obj.x - number*obj.cos;
point.y = obj.y - number*obj.sin;
return obj1;
};

在svg中的line和path根据路径返回x,y的更多相关文章

  1. jsp中的basePath和path(绝对路径 相对路径)

    在JSP中的如果使用 "相对路径" 则有 可能会出现问题. 因为 网页中的 "相对路径" , 他是相对于 "URL请求的地址" 去寻找资源. ...

  2. 【js类库Raphaël】基于svg中的path画40%表示的环型图

     一.可供参考的文档资料. raphaeljs官网:http://raphaeljs.com/ w3c关于path的介绍:http://www.w3.org/TR/2003/REC-SVG11-200 ...

  3. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  4. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  5. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  6. 关于添加图片到svg中,rails下使用js, 用parseFloat来调整force.on时的位置

    注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %& ...

  7. SVG & convert polygon/polyline to path

    SVG & convert polygon/polyline to path SVG Polygon/Polyline to Path Converter https://codepen.io ...

  8. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  9. 在 SVG 中添加交互性

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgint/ SVG 中的交互性可以分为三个领域 -- 链接.事件和脚本.本文将依次讨论这三个领域. ...

随机推荐

  1. 基于Grunt&Mocha 搭建Nodejs自动化单元测试框架(含代码覆盖率统计)

    Introduction Grunt 是一个基于任务的JavaScript 世界的构建工具 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异 ...

  2. 【解决】putty使用从AWS下载的private key登录失败

    在AWS启动一个实例时如果创建并下载了一个KeyPair的私钥(*.pem),则可以此私钥作为Credentials通过putty远程登录到这个实例系统.但在实际操作中,用putty登录时会提示如下错 ...

  3. gtest学习一:在vs2013中搭建gtest环境

    gtest版本:1.7.0,在哪里下载源码就不说了,网上太多了~ 配置过程: 1.下载解压后,进入googletest/msvc目录,直接打开gtest.sln,发现有四个工程:gtest.gtest ...

  4. selenium 介绍1

    本文主要是吸收这些帖子的营养,多谢互联网,和未知名作者. http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2011/1009/203318.h ...

  5. Servers

    Servers¶ Server interface. class novaclient.v1_1.servers.Server(manager, info, loaded=False) Bases: ...

  6. 对于大批量赋值功能,使用if判断是否能提高性能

    场景: 如果对某变量进行赋值,是否需要判断一下,如果相等就不用赋值,这样会不会提高性能. 代码如下: "; "; , x2=, x3=; Stopwatch w = new Sto ...

  7. hadoop 日志分析

    1:在每一个tomcat服务器上,生成的日志目录中,在java中用定时器每天将当天的日志上传到hadoop中 (技术要点:quatz+hadoop-client)具体的目录动态的采用时间品名 2:ha ...

  8. Linux SAMBA Practical

    Samba配置 on Ap1-10.*.16.81首先,判斷samba服務是否安裝?[root@ap01 ~]# rpm -qa|grep sambasamba-client-3.5.10-125.e ...

  9. (分享)根据IP获取地理位置(百度API)

    说明: 本程序调用的百度地图接口 http://lbsyun.baidu.com/index.php?title=webapi/high-acc-ip#h. 使用C#语言+VS2015 IDE开发 效 ...

  10. Android IOS WebRTC 音视频开发总结(八十六)-- WebRTC中RTP/RTCP协议实现分析

    本文主要介绍WebRTC中的RTP/RTCP协议,作者:weizhenwei ,文章最早发表在编风网,微信ID:befoio 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID ...