SVG 画动态线 实例

最新推荐文章于 2023-07-18 10:03:26 发布
最新推荐文章于 2023-07-18 10:03:26 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： SVG 文章标签： SVG marker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhousheng193/article/details/84173382
版权

直接上代码，这个画图是直接放在HTML中的,直接在非IE下运行即可

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>SVG test</title>
<script type="text/javascript">
function init()
{
    var div = document.getElementById('jsDiv');
	<!-- 定义svg主体 -->
    var svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svgNode.setAttribute('width','400px');
		svgNode.setAttribute('height','200px');
		svgNode.setAttribute('viewBox','0 0 4000 2000');
		svgNode.setAttribute('version', '1.1');
		svgNode.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    
   
    var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		marker.setAttribute('id', 'testM');
		marker.setAttribute('viewBox', '0 0 10 10');
		marker.setAttribute('refX', '0');
		marker.setAttribute('refY', '5');
		marker.setAttribute('markerUnits', 'strokeWidth');
		marker.setAttribute('markerWidth', '4');
		marker.setAttribute('markerHeight', '3');
		marker.setAttribute('orient', 'auto');

    var mpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	    mpath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
 
   

	var linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		linePath.setAttribute('d', 'M 1000 750 L 2000 750 L 2500 1250');
		linePath.setAttribute('fill', 'none');
		linePath.setAttribute('stroke', 'black');
		linePath.setAttribute('stroke-width', '100');
		linePath.setAttribute('marker-end', 'url(#testM)');


    marker.appendChild(mpath);
    defs.appendChild(marker);
    svgNode.appendChild(defs);
    svgNode.appendChild(linePath);
	div.appendChild(svgNode);
	

}
</script>
</head>

<body οnlοad="init();">
<div id="mainDiv" style="width: 100%;border-style:dotted " align="center" >
    
	<svg version="1.1" width="400px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 4000 2000'>
        <defs>
			<marker id = "StartMarker" viewBox = "0 0 12 12" refX = "10" refY = "6" markerWidth = "3" markerHeight = "3" stroke = "green"			stroke-width = "2" fill = "none" orient = "auto">
				 <circle cx = "6" cy = "6" r = "3"/>
            </marker>
			<marker id = "MidMarker" viewBox = "0 0 10 10" refX = "3" refY = "3" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3"		  fill = "red" orient = "auto">
				<path d = "M 0 0 L 5 0 L 5 5 L 0 5 z"/>
			</marker>
			<marker id = "EndMarker" viewBox = "0 0 10 10" refX = "0" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3"    orient="auto">
				<path d = "M 0 0 L 10 5 L 0 10 z"/>
			</marker>
        </defs>
		<path d="M 0 0 L 10 5 L 0 10 z"></path>
		<path d = "M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill = "none" stroke = "black" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
		<path d = "M 1000 750 S 2000 750 2500 1250 S 1200 1000 1300 1400 S 1700 1480 1900 1200" fill = "none" stroke = "tomato" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
    </svg>
</div>

<div id ="jsDiv" style="width:100%;border-style:dotted;" align="center">
	
</div>
<div id ="jsDiv2" style="width:100%;border-style:dotted;" align="center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  zoomAndPan="disable" οnlοad="getSVGDoc(evt)">

  <title>SVG - Learning By Coding</title>
  <desc>SVG-Spezifikation in Beispielen</desc>

  <defs>

    <script type="text/javascript">
      <![CDATA[

      var svgdoc,svgroot,newline,posx,posy,posmin=50,drawing;
      var linecol="#000",linewidth="1px",check=false;
      var svgns="http://www.w3.org/2000/svg";


    var defs2 = document.createElementNS('http://www.w3.org/2000/svg', 'defs');

    var endMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		endMarker.setAttribute('id', 'endMarker');
		endMarker.setAttribute('viewBox', '0 0 10 10');
		endMarker.setAttribute('refX', '0');
		endMarker.setAttribute('refY', '5');
		endMarker.setAttribute('markerUnits', 'strokeWidth');
		endMarker.setAttribute('markerWidth', '5');
		endMarker.setAttribute('markerHeight', '4');
		endMarker.setAttribute('orient', 'auto');

    var endPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	    endPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');

    endMarker.appendChild(endPath);

    var middleMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		middleMarker.setAttribute('id', 'endMarker');
		middleMarker.setAttribute('viewBox', '0 0 10 10');
		middleMarker.setAttribute('refX', '0');
		middleMarker.setAttribute('refY', '5');
		middleMarker.setAttribute('markerUnits', 'strokeWidth');
		middleMarker.setAttribute('markerWidth', '5');
		middleMarker.setAttribute('markerHeight', '4');
		middleMarker.setAttribute('orient', 'auto');

    var middlePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	    middlePath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');

   middleMarker.appendChild(middlePath);
  
    var startMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		startMarker.setAttribute('id', 'startMarker');
		startMarker.setAttribute('viewBox', '0 0 12 12');
		startMarker.setAttribute('refX', '10');
		startMarker.setAttribute('refY', '6');
		startMarker.setAttribute('markerUnits', 'strokeWidth');
		startMarker.setAttribute('markerWidth', '3');
		startMarker.setAttribute('markerHeight', '3');
		startMarker.setAttribute('stroke','green');
		startMarker.setAttribute('stroke-width','2');
		startMarker.setAttribute('fill','none');
		startMarker.setAttribute('orient', 'auto');

    var startCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	    startCircle.setAttribute('cx', '6');
	    startCircle.setAttribute('cy', '6');
	    startCircle.setAttribute('r', '3');
     startMarker.appendChild(startCircle);


      function getSVGDoc(load_evt)
      {
        svgdoc=load_evt.target.ownerDocument;
        svgroot=load_evt.target;
	
	
	 defs2.appendChild(endMarker);
	 defs2.appendChild(middleMarker);
	 defs2.appendChild(startMarker);
	 svgroot.appendChild(defs2);

        drawing=svgdoc.getElementById("drawing");

        svgroot.addEventListener("mousedown",MDown,false);
        svgroot.addEventListener("mousemove",MMove,false);
        svgroot.addEventListener("mouseup",MUp,false);
      }


      function MDown(mousedown_event)
      {
        Coords(mousedown_event);

        newline=svgdoc.createElementNS(svgns,"line");
        newline.setAttribute("x1",posx);
        newline.setAttribute("x2",posx);
        newline.setAttribute("y1",posy);
        newline.setAttribute("y2",posy);
        newline.setAttribute("stroke",linecol);
        newline.setAttribute("stroke-width",linewidth);
	newline.setAttribute('marker-end', 'url(#endMarker)');
	newline.setAttribute('marker-start', 'url(#startMarker)');
	
        check=true;
      }


      function MMove(mousemove_event)
      {
        if(check)
        {
          Coords(mousemove_event);

          newline.setAttribute("x2",posx);
          newline.setAttribute("y2",posy);
          drawing.appendChild(newline);
       }
      }


      function MUp()
      {
        check=false;
      }


      function Coords(mouse_event)
      {
        posx=mouse_event.clientX;
        posy=mouse_event.clientY;

        if(posx<posmin)posx=posmin;
        if(posy<posmin)posy=posmin;
        if(posx>640+posmin)posx=640+posmin;
        if(posy>480+posmin)posy=480+posmin;
      }


      function SetLineColor(mousedown_event)
      {
        linecol=mousedown_event.target.style.getPropertyValue("fill");
        svgdoc.getElementById("aktline").style.setProperty("stroke",linecol,"");
      }


      function SetLineWidth(mousedown_event)
      {
        linewidth=mousedown_event.target.style.getPropertyValue("stroke-width");
        svgdoc.getElementById("aktline").style.setProperty("stroke-width",linewidth,"");
      }

      ]]>
    </script>

  </defs>

  <text x="30" y="30" style="fill: #000; font-size: 24px">
    Linien zeichnen (mit Wahl von Farbe und Strichst鋜ke)</text>

  <rect x="50" y="50" width="640" height="480" rx="5" ry="5"
    style="fill: #FFF; stroke: #000"/>

  <g οnmοusedοwn="SetLineColor(evt)">

    <rect x="30" y="60" width="10" height="10"
      style="fill: #FF0; stroke: #000"/>

    <rect x="30" y="80" width="10" height="10"
      style="fill: #F00; stroke: #000"/>

    <rect x="30" y="100" width="10" height="10"
      style="fill: #090; stroke: #000"/>

    <rect x="30" y="120" width="10" height="10"
      style="fill: #00C; stroke: #000"/>

    <rect x="30" y="140" width="10" height="10"
      style="fill: #000; stroke: #000"/>

  </g>

  <g οnmοusedοwn="SetLineWidth(evt)">

    <line x1="30" y1="180" x2="40" y2="180"
      style="stroke: #000; stroke-width: 1px"/>

    <line x1="30" y1="200" x2="40" y2="200"
      style="stroke: #000; stroke-width: 2px"/>

    <line x1="30" y1="220" x2="40" y2="220"
      style="stroke: #000; stroke-width: 3px"/>

    <line x1="30" y1="240" x2="40" y2="240"
      style="stroke: #000; stroke-width: 4px"/>

    <line x1="30" y1="260" x2="40" y2="260"
      style="stroke: #000; stroke-width: 5px"/>

  </g>

  <line id="aktline" x1="18" y1="58" x2="18" y2="262"
    style="stroke: #000; stroke-width: 1px"/>

  <!-- Ausgabe der Zeichnungsobjekte -->
  <g id="drawing"></g>

</svg>
</div>
</body>

</html>
zhousheng193
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
SVG之旅：SVG线条动画实现原理
W3cplus
01-14 3564
对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的
SVG 画出动态线条流动效果
sunxiaobai1的博客
02-10 8821
版權聲明: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 最近做了一个项目 UI图长这样 中间的线条没有gif 需要用代码画出来 尝试了很多种方法 最终选择了用svg画 下面是全部的代码 <template> <div class="right-page"> <Subtitles :hanzi="title.zh" :yingyu="title.en" class="title"></Subtitles> .
HTML5 SVG简单的动态绘制轮廓线条动画插件
12-12
walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件。它支持SVG的path，line 和 polyline元素。walkway使用起来简单方便，可以制作出非常酷的SVG线条动态绘制效果。
svg画直线中间箭头
11-01
用SVG画在线中间的箭头 详细介绍 http://blog.csdn.net/tuposky/article/details/40677477
html svg连线原理,SVG <polygon>
weixin_39712724的博客
05-31 290
标签 标签用来创建含有不少于三个边的图形。请把下面的代码拷贝到记事本，然后把文件保存为 "polygon1.svg"。把此文件放入您的 web 目录：/p>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">xmlns="http://www.w3.org/2000/svg">style="fill:#cccccc;stroke...
svg做出关联线图法
hail100的专栏
12-02 1373
svg做出关联线图法
svg动画之动态描边效果
08-31
在这个实例中，作者使用SVG的`<path>`元素来绘制一条线，并设置了`stroke`, `stroke-width`, 和 `fill="none"`属性以确保线条显示且不填充。关键在于`strokeDasharray`和`strokeDashoffset`属性。`strokeDasharray`...
SVG心电图效果实例应用及技术内核(附源码)
03-17
本算法适用于，数据量比较大但又得时时反应状态走势的曲线画法，无需加载所有数据，而是每次只加载最新数据，动态画线，提高数据运行速度！ 原来上传的那个版本下载出问题，对大家造成的不便还请见谅，本次上传是...
html5 SVG 灯泡发光特效.rar
07-10
html5 SVG 灯泡发光特效,开类和关灯的方式为：鼠标移上灯泡，灯泡即点亮 ，鼠标 移开后消后关灯。采用HTML5中强大的SVG技术，来实现动画的关灯和开灯效果。
巧用HTML5给按钮背景设计不同的动画简单实例
09-28
2. **第二种按钮背景动画**：采用线性渐变作为背景，通过修改`background-position`，使背景像斑马线一样移动，给人一种动态的视觉冲击。 3. **第三种按钮背景动画**：使用花点渐变，同样通过改变`background-...
用SVG创建图片连线说明
最新发布
weixin_43666952的博客
07-18 564
之前老板提到一个需求，就是给一张模型图点击图片的某一部件会有这么一个连线的框出来，进行填写选择。但是硬着头皮进行了查找，和同事交流首先想到的是canvas。自己试着完成这个需求，就在WETAB浏览器插件的chat ai 问了下画线实现方法，给出的建议就是使用SVG，首先是感觉跟canvas大致一样SVG充当的就是一个画布的角色，这个也是在逐步完善需求的时候发现的，在SVG中包裹你要连线展示说明的图片。这里展示的是绘制路线以及路线两端的坐标展示为空心圈。以及删除清空的操作。这是根据距离调整的路线坐标。
svg线路图-线路动态流动效果
xcLeigh
08-11 5337
svg线路图-线路动态流动效果，线路图中线路动态效果，线路动态流动效果，支持多样式管理。先用svg绘制，线路图，画出几条线路，然后根据线路的起始坐标，添加动态效果，出现电流流动效果。
SVG：动态曲线图
1363648943的专栏
11-13 3522
场景：假设想实现一个“曲线／直线”上面的“方点”按照这个轨迹来回滚动如何操作？ 图片上用红色画笔的线，这种svg 怎么画呢？想了半天，先是想到让 UI 出个 gif 的图片。放到位置上。后来一想觉得这个方法不行，万一 UI 没时间呢，多麻烦。 不废话，突然想到在线生成 svg ，然后把源码 抠下来，路径有了下面有好弄了。。。 1､在线生成 svg：https://sv...
前端SVG画会动的线
qq_41864230的博客
07-30 2286
简单的利用svg画线，只需修改对应的坐标点即可。
SVG技术入门：如何画出一条会动的线
face_ice的专栏
03-02 1110
css svg做动图,用svg动态绘制图形
weixin_29306571的博客
08-03 1235
以此前对svg的了解，就是通过rect／circle／line……等绘制规则图形，或者利用path路径来绘制更复杂的图形。但是这种绘制是，当我们写好svg的xml文件嵌入html代码，页面载入的时候，图形是已经绘制完成了的。例：上面的代码在页面绘制了一个半径为40的圆那么如何能够让svg的绘制是动态的呢？也就是我们如何能够让svg的绘制过程一点点的出现，而不是刷新页面图形就已经渲染出来。于是，翻开...
html 动态生成svg直线,SVG 动态添加元素与事件
weixin_39761491的博客
06-03 650
SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。 SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：SVG 快速入门svgDoc = document.getElementById("myS...
JavaScript和SVG实现点击连线
weixin_30555515的博客
09-21 1144
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取坐标点位置，并连接点</title> <style> *{margin:0 ;padding:0;} .svgcontainer,.con...
svg 动画 曲线增长图
03-25
非常感谢您的提问。SVG动画是一种基于XML的...曲线增长图是一种SVG动画效果，它可以让SVG路径在页面加载时展现出类似于手写效果的动画。如果您需要了解如何使用SVG动画创建曲线增长图，建议您查阅相关的教程和文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值