<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt);"
onmousemove="drag(evt)"
onmouseup="drop(evt)"
onmousedown="cliquer(evt)" >
<script type="text/javascript"><![CDATA[
var dragTarget;
var bool = false;
var greenC;
var redC;
var line;
var x;
var y;
function Init(evt){
greenC = document.getElementById('greenC')
redC = document.getElementById('redC')
line = document.getElementById('line')
};
function drag(evt){
x = evt.clientX;
y = evt.clientY;
if(evt.target.nodeName == 'rect'){
var text = document.getElementById('text')
redC.setAttributeNS(null,'visibility','visible');
text.firstChild.nodeValue=evt.clientX+":"+evt.clientY;
if(dragTarget && (bool==true)){ // 已经压下 拖动rect
dragTarget.parentNode.appendChild(dragTarget);
dragTarget.setAttributeNS(null,'x',x-dragxWidth);
dragTarget.setAttributeNS(null,'y',y-dragyHeight);
}
} // else hidden
if(dragTarget && (bool==true) ){ //不为空
if(dragTarget.id == 'redC'){
dragTarget.parentNode.appendChild(dragTarget);
var points = line.getAttributeNS(null,'points').split(' ');
points[points.length-1] = x+","+y;
line.setAttributeNS(null,'points',points.join(' '));
redC.setAttributeNS(null,'cx',x);
redC.setAttributeNS(null,'cy',y);
}
}
}
function drop(evt){//当放下的时候 为 line多添加
bool = false;
if(dragTarget){ //不为空
if(dragTarget.id == 'redC'){
var line1 = line.getAttributeNS(null,'points').split(' ');
var linepoint = line.getAttributeNS(null,'points')+" "+line1[line1.length-1];
line.setAttributeNS(null,'points',linepoint);
//alert(linepoint);
}
}
}
var dragxWidth;
var dragyHeight;
function cliquer(evt){
bool = true;
dragTarget = evt.target;
dragxWidth = evt.clientX-dragTarget.getAttribute('x');
dragyHeight =evt.clientY-dragTarget.getAttribute('y');
}
]]></script>
<g>
<rect width="102" height="52" rx="5" ry="5" x="20" y="20" fill="white" stroke="rgb(99,99,99)" stroke-width="2"/>
<polyline id="line" points="102,250 102,250" style="stroke:rgb(99,99,99);stroke-width:2; fill:none"></polyline>
<circle id="redC" cx="102" cy="250" r="5" fill="red" visibility="hidden"></circle>
</g>
<text x="500" y="400" id="text" fill="red">拖动红色的圆点</text>
</svg>
分享到:
相关推荐
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题
NULL 博文链接:https://zhousheng193.iteye.com/blog/1461761
svg画流程图支持拖拽,修改和保存,本人原创
HTML5 SVG绘制线条箭头稳步上升动画特效,可以用来表示公司业绩稳步上升或其他相应场景。
用SVG画在线中间的箭头 详细介绍 http://blog.csdn.net/tuposky/article/details/40677477
这是一款HTML5 svg炫酷波浪线条动画插件。该波浪动画插件基于tweenMax和SVG,也可以作为jQuery插件来使用,可以制作出漂亮的波浪线条动画特效。
这是一款HTML5 SVG线条变形动画特效。这个特效demo是一个轮播图分页导航的例子,在每个分页圆点上都有一个SVG圆形线条,当用户点击其它圆点时,圆形线条以平滑过渡的方式运动到下一个位置。
HTML5实现的轻量级绘制SVG轮廓线路径动画插件特效源码是一段实现了五款轻量级绘制SVG轮廓线路径动画效果代码,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器...
4. 动态改变Y轴的最大值最小值,防止K线图画出去。 5.根据当前点的开盘价和收盘价改变柱状图的颜色。 6.本地化一些常量,本地化日期格式。 7.根据鼠标指向的当前点的位置。动态改变tooltip的位置
Vivus是一款可以执行SVG路径动画的轻量级Javascript库。Vivus可以绘制SVG图形的外观。通过该svg路径动画插件,你可以使用同步或异步的方式来执行SVG图像路径的动画。
一款使用html5 svg技术制作的线条动态绘制iphone边框动画效果,页面中先是用线条动态绘制出iphone的轮廓,然后再显示iphone图片,效果十分华丽。
</svg> <!-- straight line --> <div class="straight-line"></div> <div class="dot active"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> ...
walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持SVG的path,line 和 polyline元素。walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果。
CSS3 SVG文字线条填色动画特效是一款基于svg绘画创意的LOVE文字样式特效。
HTML5 SVG简单的动态绘制轮廓线条动画插件
jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。
两个节点之间画线,使用SVG,案例建议使用webstorm打开,就不用自己另外启一个服务了,原本想使用LeaderLine, 但是LeaderLine的SVG全画在body上了,不满足要求,所以自己写了一个简单的,目前只是初版,只支持开始...
网络资源拿出来与大SVG是目前最火热的图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形,它是基于XML,由W3C联盟进行开发。SVG可以实现无损缩放,在性能上要比其它格式的图片更好家...
之前我们分享过一些基于CSS3和SVG的自行车动画,比如这款SVG/CSS3自行车 模拟自行车行驶动画和纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画,与前面自行车动画不同的...
HTML5 SVG动画圆点索引按钮焦点图切换特效,这是一款轮播图分页导航的例子,在每个分页圆点上都有一个SVG圆形线条,当用户点击其它圆点时,圆形线条以平滑过渡的方式运动到下一个位置。