由于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. CentOS 6.5下静默安装oracle

    本例: 通过SSH远程连接云主机,上传oracle11g安装包,在centos6.5上无图形化界面静默安装oracle11g. 涉及工具及环境: 1.本地环境windows7+ssh远程连接工具xSh ...

  2. Why is Visual Studio 2015 not able to find or open PDB files?

    first change parameters, Tools->Options->Debugging->Symbols->Microsoft Symbol Server, ye ...

  3. Struts2:效验器——声明式

    就是用xml配置的方式,而不是Java代码的形式,那个是“编程式” Action: package org.ah.s2; import com.opensymphony.xwork2.ActionSu ...

  4. 组合or继承

    面向对象设计有一个原则“优先使用对象组合,而不是继承”. 下面是两者优缺点的比较: 组 合 关 系 继 承 关 系 优点:不破坏封装,整体类与局部类之间松耦合,彼此相对独立 缺点:破坏封装,子类与父类 ...

  5. PL/SQL Developer 和 instantclient客户端安装配置(图文)

    一: PL/SQL Developer 安装 下载安装文件安装,我这里的版本号是PLSQL7.1.4.1391,安装目录是:D:\soft\PLSQLDeveloper 二:instantclient ...

  6. Scorpio-CSharp总链接

    简介 源码目录介绍

  7. javascript Windouw 转自 http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html

    javascript之window对象 window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. 1.全局的window对象 JavaScr ...

  8. Ubuntu实现wifi热点

    系统:Ubuntu14.04 方法一: 打开网络连接,新建wifi,设置SSID和密码,完成设置后保存,再连接到隐藏的wifi,选择刚建立好的连接即可 优点:简单方便 缺点:建立的是Ad-hoc模式信 ...

  9. nodejs(1)

    node.js 是一个让javascript运行在服务端的开发平台 node.js的环境部署 1.下载安装包 https://nodejs.org/en/ 安装后 打开cmd的dos窗口 运行node ...

  10. 解决低版本chrome浏览器不支持es6 Array.find()

     if (!Array.prototype.find) {  Array.prototype.find = function(predicate) {    'use strict';    if ( ...