由于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. X-Cart 学习笔记(二)X-Cart框架1

    目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 四.X- ...

  2. java读取文件之txt文本

    1.方法一: public static String txt2String(File file){ 13 String result = ""; 14 try{ 15 Buffe ...

  3. Twisted

    Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如网络协议,线程,数据库管理,网络操作,电子邮件等 事件驱动 一,注册事件 二,触发事件 自定义事件框架  event_fram.py # ...

  4. 今天早上刚刚碰到的一个问题oracle数据归档已满,只能进行内部连接,ORA-00257 archiver error. 错误的处理方法

    archive log 日志已满ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法1. 用sys用户登录  sq ...

  5. mysql数据库字符集的设置

    my.ini文件中clinet和mysqld中的写法不一样,要注意  [client]   port=3306   default-character-set=utf8      [mysqld]   ...

  6. Mono Fragment之间转换

    var newFragment = new mybacklogF (); var ft = FragmentManager.BeginTransaction (); ft.Replace (Resou ...

  7. php SimpleXML 例子

    $txt = GetRemoteText($url); if(strlen($txt) > 0) { $xml = simplexml_load_string($txt); //获取xml if ...

  8. 编译安装带ssl 模块指定版本Python

      出现这个或者fatal error: openssl/名单.h: No such file or directory.都是没有安装libssl-dev- libssl-dev包含libraries ...

  9. 使用onclick跳转到其他页面/跳转到指定url

    ☆如果是本页显示可以直接用location,方法如下: ①onclick="javascript:window.location.href='URL'" ②onclick=&quo ...

  10. 获取访问者的IP

    import java.io.Serializable; import java.net.InetAddress; import java.net.UnknownHostException; impo ...