参考网站：http://dayu.pw/svgcontrol/

主要功能：手动可视化生成 SVG图片PATH路径。

效果如下：

代码如下：

 <!DOCTYPE html>

 <!-- 参考：http://dayu.pw/svgcontrol/ -->

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>SVG PATH路径生成</title>

 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

 <style>

   body{

     background: #ccc;

     font-family: 'Microsoft YaHei';

     color: #345;

   }

   .svg-inner{

     width: 900px;

     height: 600px;

     margin: 0 auto;

     background: #fff;

   }

   #svgMain{

     -webkit-user-select: none;

     -moz-user-select: none;

     -ms-user-select: none;

     box-shadow:0px 3px 13px #333333;

   }

   #svgMain circle{

     cursor: pointer;

     fill:rgba(200,200,200,1);stroke:rgba(200,200,200,1);stroke-width:3

   }

   #svgMain polyline{

     fill:rgba(200,200,200,0);stroke:rgba(200,200,200,1);stroke-width:1

   }

   h1, h4{

     text-align:center;

     margin:10px;

   }

 </style>

 <h1>贝塞尔曲线控制</h1>

 <h4>M200 250 C141.5 130 421.5 146 500 250</h4>

 <div style="text-align:center; margin-bottom:10px;">

 <label><input type="checkbox" id="chkZ" />闭合</label>

 &nbsp;

 <select id="selType">

 <option value="M">M 移动</option>

 <option value="L" selected>L 画线到</option>

 <option value="H">H 水平绘制</option>

 <option value="V">V 竖直绘制</option>

 <option value="C">C 三次贝塞尔</option>

 <option value="S">S 三次贝塞尔对称</option>

 <option value="Q">Q 二次贝塞尔</option>

 <option value="T">T 二次贝塞尔连续</option>

 </select>

 &nbsp; *双击可添加控制点

 </div>

 <div class="svg-inner">

     <svg width="100%" height="100%" id="svgMain" xmlns="http://www.w3.org/2000/svg" version="1.1">

         <polyline points=""></polyline>

         <path d="" style="fill:rgba(0,0,0,0);stroke:#345;stroke-width:3"></path>

         <circle data-type="M" cx="200" cy="250" r="5"></circle>

         <circle data-type="C" cx="141.5" cy="130" r="5"></circle>

         <circle data-type="C" cx="421.5" cy="146" r="5"></circle>

         <circle data-type="C" cx="500" cy="250" r="5"></circle>

     </svg>

 </div>

 <script>

 $(function(){

     $('#svgMain').dblclick(function(e){

         var cx = e.pageX-$(this).parent().offset().left;

         var cy = e.pageY-$(this).parent().offset().top;

         var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");

         circle.setAttribute("cx", cx);

         circle.setAttribute("cy", cy);

         circle.setAttribute("r", 5);

         circle.setAttribute("data-type", $('#selType').val());

         $(this).append(circle);

         setPoints($(circle));

         setPolyline();

         setPath();

     });

     $('#svgMain circle').each(function(){

         setPoints($(this));

     });

     $('#chkZ').change(function(){

         setPolyline();

         setPath();

     });

     setPolyline();

     setPath();

 });

 function setPoints(obj)

 {

     var mouseDown=false;

     obj.mousedown(function(){

         mouseDown=true;

     });

     obj.parent().mouseup(function(){

         mouseDown=false;

     });

     obj.parent().mousemove(function(e){

         e.preventDefault();

         if(mouseDown)

         {

             obj.attr('cx',e.pageX-obj.parent().offset().left);

             obj.attr('cy',e.pageY-obj.parent().offset().top);

             setPolyline();

             setPath();

         }

     });

 }

 function setPolyline()

 {

     var points = '';

     $('#svgMain circle').each(function(){

         points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' ';

     });

     $('#svgMain polyline').attr('points', points);

 }

 function setPath()

 {

     var d = '';

     var lastType = '';

     $('#svgMain circle').each(function(){

         var cx = $(this).attr('cx');

         var cy = $(this).attr('cy');

         var t = $(this).data('type');

         if (lastType != t || t == 'M'){

             d += t;

         }

         if (t == 'H') {

             d += cx + ' ';

         } else if (t == 'V') {

             d += cy + ' ';

         } else {

             d += cx + ' ' + cy + ' ';

         }

         lastType = t;

     });

     if ($('#chkZ')[0].checked)

     {

         d += ' Z';

     }

     $('h4').html(d);

     $('#svgMain path').attr('d', d);

 }

 </script>

 </body></html>

SVG PATH 生成器的更多相关文章

  1. 使用SVG Path绘图

    最近一个项目,需要做个Web版本的设计器,用来进行工厂流水线布局的设计. 项目中采用了SVG.JS来做,但是以前流水线是采用单纯的画线的方式实现.客户提出希望用不同的底纹表示不同的流水线,经过一番调查 ...

  2. SVG path

    在网页上画一图形,比如星星或波浪线,开始是想着图形软件画一个的,后来发现SVG这绘图程序的语言,感觉甚是可以,就发了些时间学了一下,在此做一简单分享和记录. 菜鸟上是这么介绍的(SVG 是使用 XML ...

  3. svg path 动画效果

    http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8% ...

  4. svg path 解析

    <pre><svg width="100%" height="100%" version="1.1" xmlns=&quo ...

  5. SVG path d Attribute

    Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 http://www.w3. ...

  6. SVG Path高级教程

    课程分为四个方面: 1. Path概述 2. 移动和直线命令 3. 弧线命令 4. 贝塞尔曲线命令 Path概述 <path> 标签用来定义路径,Path字符串是由命令及其参数组组成的字符 ...

  7. Svg path画线（不管是直线还是曲线）在一定情况下线条的宽度不一的情况（记录）

    在项目中涉及到svg: 使用path划线实现图表功能. 记录在实现的过程中发现的问题:path在小像素的情况下画出的线条宽度不一样.这是为什么呢? 以下是我做的猜想: 可以看图 在宽度给的很足的时候没 ...

  8. svg path中的贝塞尔曲线

    首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控 ...

  9. svg path详解

    svg的<path>标签具有强大的功能,主要包括以下命令 M(move to) 参数:x,y L(line to) 参数:x,y H 参数:x V 参数:y C S Q T Z 参考:

随机推荐

  1. SQL语句50题

    -- 一.创建教学系统的数据库,表,以及数据 --student(sno,sname,sage,ssex) 学生表--course(cno,cname,tno) 课程表--sc(sno,cno,sco ...

  2. js逗号表达式

    在js中的某些场景,","是一种运算符号,只不过他的优先级要低于普通的原酸符,在变量声明或者return中,经常看到逗号表达式. 声明变量: var a=1,b=2,c=3; co ...

  3. 基于keil平台下STM32L系列移植FreeRTOS操作系统

    1,下载FreeRTOS https://www.freertos.org/a00104.html 点击下载后,会进入如下界面 之后会弹出下载界面,格式为.EXE,不用怀疑.不是木马. 等待下载完成, ...

  4. Jmeter（1）介绍

    JMeter是什么东西 Jmeter(Apache JMeter)是一个100%基于JAVA的应用程序,它的功能是 分析和衡量 web应用程序和各种服务的性能和负载能力 Jmeter不是一个浏览器,它 ...

  5. Log4j2入门

    转载自:http://www.cnblogs.com/hzhuxin/p/6406272.html Log4j2 是 Log4j的升级版本,对其进行解压,可以看到以下几个jar包. log4j-1.2 ...

  6. C&C++ Calling Convention

    tkorays(tkorays@hotmail.com) 调用约定(Calling Convention) 是计算机编程中一个比较底层的设计,它主要涉及: 函数参数通过寄存器传递还是栈? 函数参数从左 ...

  7. SharePoint修改左上角文字的命令行

    $webapp = Get-SPWebApplication “http://test-spweb1” --需要修改的站点$webapp.SuiteNavBrandingText = “XXXXXX” ...

  8. UOJ#75. 【UR #6】智商锁 随机化算法 矩阵树定理

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ75.html 前言 根本没想到. 题解 首先我们可以考虑一种做法: 找一些图,使得他们各自的生成树个数乘起来等于 k. 那 ...

  9. 2018-2019-2 网络对抗技术 20165319 Exp2 后门原理与实践

    后门的基本概念及基础问题 后门程序就是留在计算机系统中,供某位特殊使用者通过某种特殊方式控制计算机系统的途径. [1] 后门程序,跟我们通常所说的"木马"有联系也有区别.联系在于: ...

  10. java基础之IO流及递归理解

    一.IO流(简单理解是input/output流,数据流内存到磁盘或者从磁盘到内存等) 二.File类(就是操作文件和文件夹的) 1.FIleFile类构造方法 注意:通过构造方法创建的file对象是 ...