• H5 svg (一)
2019-11-06 15:10:12

基础画法:

<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<body>
<!--(0,0)-----→ x 方向  (屏幕坐标系)-->
<!----   |                         -->
<!--y    ↓  方向                   -->
<svg width="800" height="600" preserveAspectRatio="xMidYMid meet" viewbox="0 0 800 600"
style="border:1px solid rgb(0,170,204)">

<!--- 画线1--- x1,y1 起始点;   x2,y2终点  -->
<line x1="0" y1="30" x2="800" y2="30" style="stroke: red;"></line>
<!-- 文字对齐1 -->
<text x="0" y="30">文字对齐1
<tspan alignment-baseline="baseline">baseline</tspan>
<tspan alignment-baseline="middle">middle</tspan>
<tspan alignment-baseline="central">central</tspan>
<tspan alignment-baseline="hanging">hanging</tspan>
<tspan alignment-baseline="before-edge">before-edge</tspan>
<tspan alignment-baseline="after-edge">after-edge</tspan>
<tspan alignment-baseline="mathematical">mathematical</tspan>
</text>
<!--- 画线2-- x1,y1 起始点;   x2,y2终点  -->
<line x1="0" y1="60" x2="800" y2="60" style="stroke: red;"></line>
<!-- 文字对齐2 -->
<text x="0" y="60">文字对齐2
<tspan dominant-baseline="baseline">baseline</tspan>
<tspan dominant-baseline="middle">middle</tspan>
<tspan dominant-baseline="central">central</tspan>
<tspan dominant-baseline="hanging">hanging</tspan>
<tspan dominant-baseline="text-before-edge">before-edge</tspan>
<tspan dominant-baseline="text-after-edge">after-edge</tspan>
<tspan dominant-baseline="mathematical">mathematical</tspan>
</text>
<!--- 画线3-- x1,y1 起始点;   x2,y2终点  -->
<line x1="0" y1="100" x2="800" y2="100" style="stroke: red;"></line>
<!-- 文字对齐3 -->
<text x="0" y="100">文字对齐3
<tspan baseline-shift="sub">sub</tspan>
<tspan baseline-shift="super">super</tspan>
<tspan baseline-shift="-60%">-60%</tspan>
<tspan baseline-shift="20px">20px</tspan>
</text>
<!-- 箭头在 H5 SVG (二) 细讲 -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto"
markerUnits="strokeWidth">
<path d="M 0 0 L 0 6 L 9 3 z" fill="#f00" />
</marker>
</defs>
<line x1="295" y1="50" x2="95" y2="75" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />

<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---画矩形--- x1,y1 起始点;   x2,y2终点  ------------------------------------->
<rect x="4" y="140" width="50" height="50" style="stroke: black;fill: none;"></rect>
<!-- 中心点 -->
<ellipse cx="29" cy="165" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 左上 -->
<ellipse cx="4" cy="140" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 右上 -->
<ellipse cx="54" cy="140" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 左下 -->
<ellipse cx="4" cy="190" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 右下 -->
<ellipse cx="54" cy="190" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!--- 画圆角矩形--- x1,y1 起始点;   x2,y2终点, rx:x轴半径, ry:y轴半径,画圆角  -->
<rect x="64" y="140" width="100" height="50" rx="3" ry="10" style="stroke: rgb(50, 59, 179);fill: #ffcccc;">
</rect>
<!-- 中心点 -->
<ellipse cx="114" cy="165" rx="3" ry="3" style="stroke: #201f1a;fill: #26a4ca;">
</ellipse>
<!-- 文字按中心点 水平/垂直居中 -->
<text x="114" y="165" text-anchor="middle" alignment-baseline="middle" style="font-size:9pt;">
rect
</text>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!--- 圆--- cx,cy圆心点;   rx:x轴半径, ry:y轴半径   -->
<ellipse cx="225" cy="165" rx="50" ry="25" style="stroke: #201f1a;fill: #caa426;">
</ellipse>
<text x="180" y="165" alignment-baseline="central" style="font-size:9pt;">
ellipse
</text>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---多段线------------------------------------------------>
<polyline points="300 140 365 150 365 165 " style="stroke: rgb(46, 49, 43);fill: #caa426;"></polyline>
<text x="300" y="165" alignment-baseline="central" style="font-size:9pt;">
polyline
</text>
<polyline points="370 140 385 150 365 185 400 185" style="stroke: rgb(46, 49, 43);fill:none;"></polyline>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---多边形----(x,y为一组)-------------------------------------------->
<polygon points="420 140 440 150 485 205 420 205" style="stroke: rgb(46, 49, 43);fill: #4cca26;"></polygon>
<text x="420" y="165" alignment-baseline="central" style="font-size:9pt;">
polygon
</text>
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!---------------------------------------------------------------------------->
<!-- M:moveTo  L:lineTo 大写表示绝对坐标, 小写表示已当前path的相对坐标(l -10 20 ->L 500-10 = 490 180+20 = 200)-->
<path d="M 500 140 L 530 180 L 500 180 l -10 20" style="stroke: rgb(122, 189, 202);fill: #27850b;"></path>
<!-- M:moveTo  h:水平 v:垂直,  大写表示绝对坐标,小写表示已当前path的相对坐标-->
<path d="M 560 140 h 20 v 50 " style="stroke: rgb(122, 189, 202);fill:none;"></path>
<!-- M:moveTo  h:水平 v:垂直,  大写表示绝对坐标,小写表示已当前path的相对坐标-->
<path d="M 590 140 v 50 h 50 v -50 h -50 " style="stroke: rgb(122, 189, 202);fill:#2c0b85;"></path>
<!-- A:参1(rx):x轴半径 参2(ry):y轴半径 参3(x-axis-rotation):此弧段所在的X轴与水平方向的夹角，即X轴的旋转角度(°)
参4(large-arc-flag):0劣弧(<180) 1优弧(>180) 参5(sweep-flag):0逆时针 1代表从起点到终点弧线绕中心顺时针方向
参6(x):x终点坐标 参7(y):y终点坐标 -->
<path d="M 660 140 a 200 50 0 0 1 0 50" style="stroke: rgb(122, 189, 202);fill:#56850b;"></path>
<text x="500" y="165" dy="0.5em" text-anchor="middle" style="font-size:9pt;">
path
</text>
</svg>
</body>

</html>


效果:

H5 svg (二)

更多相关内容
• 效果图原理主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset. stroke-dasharraystrokedasharray属性用于创建虚线：下面来看看例子 path{ stroke: #000; fill: transparent; stroke-widt

## 原理

主要应用到了SVG的两个属性分别为: stroke-dasharray和stroke-dashoffset.

### stroke-dasharray

strokedasharray属性用于创建虚线：下面来看看例子

        path{
stroke: #000;
fill: transparent;
stroke-width: 2px;
stroke-dasharray: 10;
}
</style>
<body>
<svg width=500 height=500>
<path d="M 100 100 L 200 100"/>
</svg>

效果:

,当我们尝试增大stroke-dasharray时效果:

会发现放我们增大它的值时, 其中间的空白会变大吗,因此当我们把它设置成线长时并通过stroke-dashoffset就可以隐藏再通过CSS3就可以实现动画效果.

## 代码

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
path{
stroke: #000;
fill: transparent;
stroke-width: 2px;
stroke-dasharray: 10;
/*             stroke-dashoffset: 100;
animation: dash 1s linear infinite alternate-reverse; */
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

</style>
<body>
<svg width=500 height=500>
<path d="M 100 100 L 200 100"/>
</svg>
</body>
</html>
展开全文
• H5svg画贝塞尔曲线方法： d属性M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲) C,S,Q,T贝塞尔曲线大写为绝对坐标(具体的坐标位置)小写为相对坐标(相对起始坐标点的具体长度) A命令x-径y...

【H5】 svg画贝塞尔曲线方法：

d属性M(起始坐标),L(结束坐标),H(水平线),V(垂直线),A(圆弧),Z(闭合路劲) C,S,Q,T贝塞尔曲线大写为绝对坐标(具体的坐标位置)小写为相对坐标(相对起始坐标点的具体长度)

1. A命令x-径y半径角度弧长(0小弧1大弧方向(0逆时针1顺时针)终点(x y)
2. C命令:三次贝塞尔曲线(x1,y1,x2,y2,x,y) x1,y1控制点一x2,y2 控制点二x,y结束点
3. S命令:平滑贝塞尔曲线(自动对称一个控制点) (x2,y2,x,y) x2,y2控制点x,y结束点
4. Q命令:二次贝塞尔曲线(x1,y1,x,y) /x1,y1控制点 /x,y结束点
5. T命令：一次贝塞尔曲线(x,y)结束点 （就是一条直线）

## 1. 见：

https://blog.csdn.net/qq_41614928/article/details/90745457

## 2. C命令:三次贝塞尔曲线(x1,y1,x2,y2,x,y) x1,y1控制点一x2,y2 控制点二x,y结束点

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
<!--C命令：三次贝塞尔曲线 (x1,y1,x2,y2,x,y)/ x1,y1 控制点一 /x2,y2 控制点二 /x,y 结束点 -->
<path d='M100 300 C100 30 250 600 400 300' style="stroke:red;stroke-width:10;fill:pink;"></path>
</svg>
</div>


运行结果如下：

## 3. S命令:平滑贝塞尔曲线(自动对称一个控制点) (x2,y2,x,y) x2,y2控制点x,y结束点

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
<svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
<!--S命令：平滑贝塞尔曲线(自动对称一个控制点) (x2,y2,x,y) x2,y2控制点 x,y结束点-->
<path d='M100 300 S250 200 400 300' style="stroke:red;stroke-width:10;fill:pink;"></path>
</svg>
</div>


运行结果如下：

Q命令与上基本是同理 就是不会自动对称一个控制点

## 5. T命令：一次贝塞尔曲线(x,y)结束点 (就是一条直线)

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
<svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
<!-- 起点(100,300)  终点 -->
<path d='M100 300 T300 200'  style="stroke:red;stroke-width:10;fill:pink;"></path>
</svg>
</div>


展开全文
• 原标题：SVG 线条动画入门(点击上方公众号，可快速关注)作者：伯乐在线专栏作者 - chokcoco如需转载，发送「转载」二字查看说明通常我们说的 Web 动画，包含了三大类。CSS3 动画java 动画(canvas)html 动画(SVG)个人...

原标题：SVG 线条动画入门

(点击上方公众号，可快速关注)

作者：伯乐在线专栏作者 - chokcoco

如需转载，发送「转载」二字查看说明

通常我们说的 Web 动画，包含了三大类。

CSS3 动画

java 动画(canvas)

html 动画(SVG)

个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

举个栗子

SVG 线条动画，在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面，看看最近项目里的一个小需求，一个这种形状的进度条：

把里面的进度条单独拿出来，也就是需要实现这样一个效果：

脑洞大开一下，使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的，就是很麻烦。但是如果采用 SVG 的话，迎刃而解。

See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.

我们假定你在阅读本文的时候有了一定的 SVG 基础，上面代码看看就懂了，好了，本文到此结束。

好吧，还是一步一步解释，上面进度条的主要 SVG 代码如下：

SVG 为何

可缩放矢量图形，即SVG，是W3C XML的分枝语言之一，用于标记可缩放的矢量图形。(摘自MDN)

上面代码中，先谈谈 svg 标签：

version： 表示 的版本，目前只有 1.0，1.1 两种

xmlns：http://www.w3.org/2000/svg 固定值

xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略

class：就是我们熟悉的 class

width | height： 定义 svg 画布的大小

viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小(暂时可以不用理解)

有了 svg 标签，我们就可以愉快的在内部添加 SVG 图形了，上面，我在 svg 中定义了两个 polyline 标签。

SVG 基本形状

polyline：是SVG的一个基本形状，用来创建一系列直线连接多个点。

其实，polyline 是一个比较不常用的形状，比较常用的是path，rect，circle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性，在线段连接处创建圆滑过渡角。

SVG 中定义了一些基本形状，在继续下文之前，建议点进去先了解一些基本图形的标签及写法：

SVG 线条动画

好，终于到本文的重点了。

上面，我们给两个 polyline 都设置了 class，SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写，更重要的是可以配合 CSS 动画一起使用。

上面，主要的 CSS 代码：

.g-rect-path{

fill:none;

stroke-width:10;

stroke:#d3dce6;

stroke-linejoin:round;

stroke-linecap:round;

}

.g-rect-fill{

fill:none;

stroke-width:10;

stroke:#ff7700;

stroke-linejoin:round;

stroke-linecap:round;

stroke-dasharray:0,1370;

stroke-dashoffset:0;

animation:lineMove2sease-outinfinite;

}

@keyframeslineMove{

0%{

stroke-dasharray:0,1350;

}

100%{

stroke-dasharray:1350,1350;

}

}

这尼玛是什么 CSS？怎么除了 animation 全都不认识？

莫慌，其实很多和 CSS 对比一下非常好理解，只是换了个名字：

fill：类比 css 中的 background-color，给 svg 图形填充颜色；

stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；

stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；

stroke-linejoin | stroke-linecap：上文稍微提到过，设定线段连接处的样式；

stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；

stroke-dashoffset：则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个和数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。

解释很苍白，直接看例子：

See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

上面，填充进度条，使用了下面这个动画 ：

@keyframeslineMove{

0%{

stroke-dasharray:0,1350;

}

100%{

stroke-dasharray:1350,1350;

}

}

stroke-dasharray: 0, 1350;，表示线框短划线和缺口的长度分别为 0 和 1350，所以一开始整个图形都是被缺口占据，所以在视觉效果上长度为 0。

然后过渡到 stroke-dasharray: 1350, 1350，表示线框短划线和缺口的长度分别为 1350 和 1350，因为整个图形的长度就是 1350，所以整个进度条会被慢慢填充满。

掌握了这个技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景：

SVG 线条动画实现按钮交互

See the Pen svg线条动画实现按钮交互 by Chokcoco (@Chokcoco) on CodePen.

SVG 线条动画实现圆形进度条

See the Pen svg线条动画实现圆形进度条 by Chokcoco (@Chokcoco) on CodePen.

多 SVG 图形线条动画配合

之前我司一个 h5 里面应用过的，多SVG 图形线条动画配合，可以制作一些比较酷炫的动画，很有科技感。

See the Pen JbQNME by Chokcoco (@Chokcoco) on CodePen.

正文结束，我在我的 Github 上，使用 SVG 实现了一些图形 — SVG奇思妙想(https://github.com/chokcoco/SVG)，Demo可以戳这里(http://sbco.cc/demo/svg/html/index.html)。

下篇文章将会详述非规则图形，如何使用 PS + AI 生成 path 路径，实现 SVG 动画，放个 Demo，敬请期待。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

点击阅读原文，查看文中Demo

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能

译者简介( )

chokcoco：经不住流年似水，逃不过此间少年。返回搜狐，查看更多

责任编辑：

展开全文
• SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？ 一、SVG 的 animation SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为： set animate ...
• H5中对于绘画的功能一直都是强大，可以做出十分华丽的动画效果和经常使用图标都是H5标签新增绘画标签canvas和svg,这两个标签 下限低（可以很简单绘制比较单调的几何图形????????）， 上限高（做出华丽的动画效果，...
• 以上是svg的一个线上编辑器，也可以adobe Illustrator制作生成。我们通过以上编辑器可以获得以下代码。例：Layer 1给路径path 添加 class 为 path1.path1 {stroke-dasharray: 20; //表示虚线描边 该属性把线段变成...
• 弧7.线性渐变8.高斯模糊9.viewBox 一、SVG 1.线和矩形 线 .line1{ stroke: black; stroke-width: 3px; } <svg width='500px' height='300px' style='border: 1px solid #000'> <line x1='100' y1='...
• svg 动画 旋转： transform:rotate(angle x y) (不要写在style里面) angle 旋转角度 x,y旋转中心 绘制虚线： stroke-dasharray:a,b/a,b,c,d… 旋转属性 transform:rotate(angle x y) <div id='wrap' style=...
• 一、svg的引入方式 如代码： <div id="box"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > //这里是引入svg代码 <circle cx="250" cy="250" r="100...
• SVG直线SVG 元素用于绘制一条。下面是一个绘制直线的例子。上面代码的返回结果如下：x1和y1属性用于指定直线的起点，x2和y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。SVG折线元素用于...
• H5svg内text、image、path标签的使用： text标签： <div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;"> <svg xmlns=...
• 下载和安装可以通过以下几种方式安装该插件。Bowerbower install walkway.jsnpmnpm install walkway.jsCDNhttp://cdn.jsdelivr...要开始SVG线条绘制动画，可以在该对象上使用.draw方法，该方法有一个回调函数，可...
• HTML导入代码模板：SVG EditNewSave as ...svg width="100" height="100"> <circle cx="50" cy="50" r="25" /> </svg>(function() {var edit, init, updateWorkspace;init = "\n \n\n";edit = ace.ed...
• 之前用D3制作图表是初次接触SVG，当时只顾感叹D3的强大了。后来当看到网站 Serio Verify 的时候，才意识到SVG用于制作可交互的页面动画是多么有意思。于是自己也尝试在HTML页面中制作了一个鼠标滚轮控制的SVG线条...
• 全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以...
• SVG 首先我们要知道什么是SVGSVG是指可伸缩矢量图形，可用于定义用于网络的基于矢量的图形，可使用 XML 格式定义图形。并且SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失，SVG还是万维网联盟的标准。SVG...
• 学习记录(一)之h5_canvas   Svg: 　1. 什么是svg:  SVG 用于定义网络的基于矢量的图形 ， 指可伸缩矢量图形 (Scalable Vector Graphics)， 与 canvas 不同它 使用 的是 XML 格式 来 定义图形 ，因为它...
• HTML5 SVG心形文字显示动画特效是一款基于svg绘制心形线条，爱心形状文字情人节表白动画特效。
• ## 前端SVG画会动的线

千次阅读 2018-07-30 15:12:13
简单的利用svg画线，只需修改对应的坐标点即可。
• HTML5 SVG动画圆点索引按钮焦点图切换特效，这是一款轮播图分页导航的例子，在每个分页圆点上都有一个SVG圆形线条，当用户点击其它圆点时，圆形线条以平滑过渡的方式运动到下一个位置。
• SVG一直以来都受到开发者的青睐和各种WEB社区的广泛支持。从1999年开始，SVG已经开始被人们关注。但是因为浏览器的原因，它很少被人们正式使用，其中最大的祸首是IE浏览器。下面的图片是使用SVG格式的图片，你可以...
• SVG是一种基于XML的，用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性（例如笔触，颜色，粗细，填充等）来生成动画。 从...
• html5画布+贝塞尔曲线实现在线刻字效果。 可用于在饰品，或礼品上刻字等需求。 曲线坐标值 需在线上svg编辑器中 自行手绘获取，再填入代码中相应配置。
• svg呢，跟canvas其实都是用来画图的，只不过svg画的图，是矢量图，矢量图有个特点是，放大缩小，不会失真，canvas呢，是逐像素进行渲染的。...首先，使用svg简单的来一条线。 使用line标签...
• H5svg便签内的path标签椭圆： path标签：A(椭圆弧) A命令后面跟7个值： A命令 x-径 y半径 角度 弧长(0小弧/1大弧) 方向(0逆时针/1顺时针) 终点(x,y) <!-- d属性 M(起始坐标), L(结束坐标), H(水平线...

...