【SVG】svg入门

svg图和其他png图的区别：

svg图片上的每一个小的组成元素都是一个标签，由一个大的svg标签包裹作为一个整体
普通的png图片，就是作为一个整体，只能修改宽高大小等样式，不能修改细节

一、标签属性

1、SVG：可缩放矢量图（Scalable Vector Graphics）

2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入

3、svg标签属性

1、width、height：如果不指定这两个属性，默认是宽：300px，高：150px
2、viewBox(左上角的横坐标，左上角的纵坐标，视口的宽度，视口的高
度)：决定可视范围

4、circle标签属性

1、cx：横坐标，单位都是px，坐标都是相对于svg把左上角的原点
2、cy：纵坐标
3、r：半径
4、fill：填充色
5、stroke：描边色
6、stroke-width：边框宽度

5、line标签属性

1、x1、y1属性：线段起点的横坐标和纵坐标
2、x2、y2属性：线段终点的横坐标和纵坐标
3、style属性：线段的样式

6、polyline标签绘制折线

1、points属性：指定了每个端点的坐标，横、纵坐标之间与逗号分隔，点与点之间用空格分隔。

7、rect标签绘制矩形

1、x、y属性：ao属性：矩形的宽度和高度（单位像素）。

8、ellipse标签绘制椭圆

1、cx、cy属性：椭圆中心的横坐标、纵坐标（单位像素）
2、rx、ry属性：椭圆横向轴、纵向轴的半径（单位像素）。

9、polygon标签绘制多边形

1、points属性指定了每个端点的坐标，横、纵坐标之间与逗号分隔，点与点之间用空格分隔。

10、path标签绘制路径

1、d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标
2、M：移动到（moveto） L：画直线到（lineto）Z：闭合路径
3、例：<path d=" M 18,3 L 46,3 L 46,40 Z "></path>

11、text标签绘制文本

1、x、y属性：表示文本区块基线（baseline）起点的横坐标和纵坐标
2、文字的样式可以用class或style属性指定

12、use标签复制一个形状

1、href属性：指定所要复制的节点
2、x、y属性是<use>左上角的坐标
3、width、height：宽高

13、g标签将多个形状组成一个组（group），方便复用。

14、defs标签自定义形状，它内部的代码不会显示，仅供引用，类似于template

15、pattern标签

<svg width="500" height="500"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle fill="#bee9e8" cx="50" cy="50" r="35" /></pattern></defs><rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

1、id="用于引用这个模式的唯一ID。"必需的
2、指定这个模式去填充下面的矩形

16、image标签插入图片文件

1、xlink:href属性表示图像的来源

17、animate标签产生动画效果

1、attributeName：发生动画效果的属性名。
2、from：单次动画的初始值。
3、to：单次动画的结束值。
4、dur：单次动画的持续时间。
5、repeatCount：动画的循环模式。

18、animateTransform标签

1、平移，缩放，旋转或倾斜
2、from=“0 200 200” ：角度为0，围绕(200, 200)开始旋转
3、type=“类型的转换其值是随时间变化。可以是 ‘translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY’”

19、animateColor标签

1、随着时间的推移颜色转换
2、by=“相对偏移值” from=“起始值” to=“结束值”

20、animateMotion标签

1、使元素沿着动作路径移动
2、calcMode=“动画的插补模式。可以是’discrete’, ‘linear’, ‘paced’, ‘spline’”
3、path=“运动路径”
4、keyPoints=“沿运动路径的对象目前时间应移动多远”
5、rotate=“应用旋转变换”
6、xlink:href=“一个URI引用<path>元素，它定义运动路径”

21、滤镜

1、定义滤镜

<svg><defs><filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="15" /></filter></defs><rect width="90" height="90" stroke="green" stroke-width="3"fill="yellow" filter="url(#f1)" />
</svg>

fillter标签定义一个滤镜，包裹在defs标签中，id作为这个路径的唯一标识，方便下面的矩形使用滤镜
feGaussianBlur标签定义模糊效果，in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量

22、更多属性

1、stroke：可设置元素轮廓的颜色
2、stroke-width：轮廓宽度
3、stroke-linecap：定义不同类型的开放路径的终结（线段两个端点的形状）
4、stroke-dasharray：绘制虚线，短横线长度，空白长度，短横线长度，空白长度…(自动重复)

23、更多标签属性：SVG | MDN (mozilla.org)

二、js操作

1、作为DOM元素进行操作，可以添加class修改样式

2、如果使用`<object>`、`<iframe>`、`<embed>`标签插入 SVG 文件，可以获取 SVG DOM。

1、如：<iframe src="circle1.svg"></iframe>
2、var svgIframe = document.getElementById(‘iframe’).contentDocument;
3、注：img标签不能获取svg文件

3、使用svg标签，获取svg源码

1、使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
2、var svgString = new XMLSerializer().serializeToString(document.querySelector(‘svg’));

三、示例

绘制logo

代码：

<svg width='400' height='400'><rect x="50" y="50" rx="50" ry="50" width="200" height="200" style="fill:#ff1d41;"/><circle cx='150' cy='150' r='70' stroke='white' stroke-width='15' stroke-dasharray='150,20,60,20,40,20' fill="#ff1d41" stroke-linecap='round'></circle><path d='M 150,150 L 98,235'  stroke='white' stroke-width='15' stroke-linecap='round'></path><path d='M 150,150 L 202,235'  stroke='white' stroke-width='15' stroke-linecap='round' stroke-dasharray='50 20 30'></path><path d='M 80,238 L 220,238'stroke='#ff1d41' stroke-width='10'></path></svg>

【SVG】svg入门相关推荐

SVG实例入门与动画实战
前言在日常开发过程中,我们或多或少都接触过SVG,有可能是用它来画一些简单的图形,有可能是使用它来构建工程的字体文件库,甚至是用它来绘制一些复杂的可视化模块.本文会详细介绍SVG的基本图形以及常见的 ...
SVG 从入门到后悔，怎么不早点学起来（图解版）
点赞 + 关注 + 收藏 = 学会了作为一只前端,只懂 Vue.React 感觉已经和大家拉不开距离了. 可视化.机器学习等领域 JS 都有涉及到,而可视化方面已经被很多领域用到,比如大屏项目. 可 ...
什么是SVG？——SVG快速入门
最近在学习一个前端数据可视化D3.js,它的图表绘制是基于SVG的,作为一个小菜鸡,我并不知道什么是SVG,于是我决定把D3.js放一放,先学一下SVG. 那么什么是SVG呢?百度百科上是这么介绍的: ...
android 动态生成直线,Android SVG技术入门：线条动画实现原理
SVG技术入门:线条动画实现原理这是一个有点神奇的技术:一副线条构成的画能自动画出自己,非常的酷.SVG 意为可缩放矢量图形(Scalable Vector Graphics),是使用 XML 来描 ...
【CSS】SVG实战入门，svg画曲线，svg简单动画上手入门
之前我写过一篇[canvas绘画折线段],其实实际使用中,svg绘画简单的曲线是最方便的. 比如大屏中使用,或者其他小特效使用点赞 + 关注 + 收藏 = 学会了一.什么是svg? 在学习 SVG ...
SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
突袭HTML5之SVG 2D入门1 - SVG综述
位图与矢量图以前,浏览器中显示的图形,例如jpeg.gif等,都是位图,这些图像格式是基于光栅的.在光栅图像中,图像文件定义了图像中每个像素的颜色值.浏览器需要读取这些值并做出相应行动.这种图像的再 ...
SVG技术入门：线条动画实现原理
相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己.非常的酷.Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的.Brian Suda也在2 ...
html2d动画,HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
交互性 SVG拥有良好的用户交互性,例如: 1. SVG能响应大部分的DOM2事件. 2. SVG能通过cursor良好的捕捉用户鼠标的移动. 3. 用户可以很方便的通过设置svg元素的zoomAnd ...
SVG 2D入门4 - 笔画与填充
前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果:你会发现这里的内容与canvas基本上是一致的.这些属性既可以以属性的形式写在 ...

【SVG】svg入门

svg图和其他png图的区别：

一、标签属性

1、SVG：可缩放矢量图（Scalable Vector Graphics）

2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入

3、svg标签属性

4、circle标签属性

5、line标签属性

6、polyline标签绘制折线

7、rect标签绘制矩形

8、ellipse标签绘制椭圆

9、polygon标签绘制多边形

10、path标签绘制路径

11、text标签绘制文本

12、use标签复制一个形状

13、g标签将多个形状组成一个组（group），方便复用。

14、defs标签自定义形状，它内部的代码不会显示，仅供引用，类似于template

15、pattern标签

16、image标签插入图片文件

17、animate标签产生动画效果

18、animateTransform标签

19、animateColor标签

20、animateMotion标签

21、滤镜

22、更多属性

23、更多标签属性：SVG | MDN (mozilla.org)

二、js操作

1、作为DOM元素进行操作，可以添加class修改样式

2、如果使用`<object>`、`<iframe>`、`<embed>`标签插入 SVG 文件，可以获取 SVG DOM。

3、使用svg标签，获取svg源码

三、示例

【SVG】svg入门相关推荐

最新文章

热门文章

【SVG】svg入门

svg图和其他png图的区别：

一、标签属性

1、SVG：可缩放矢量图（Scalable Vector Graphics）

2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入

3、svg标签属性

4、circle标签属性

5、line标签属性

6、polyline标签绘制折线

7、rect标签绘制矩形

8、ellipse标签绘制椭圆

9、polygon标签绘制多边形

10、path标签绘制路径

11、text标签绘制文本

12、use标签复制一个形状

13、g标签 将多个形状组成一个组（group），方便复用。

14、defs标签 自定义形状，它内部的代码不会显示，仅供引用，类似于template

15、pattern标签

16、image标签 插入图片文件

17、animate标签 产生动画效果

18、animateTransform标签

19、animateColor标签

20、animateMotion标签

21、滤镜

22、更多属性

23、更多标签属性：SVG | MDN (mozilla.org)

二、js操作

1、作为DOM元素进行操作，可以添加class修改样式

2、如果使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。

3、使用svg标签，获取svg源码

三、示例

【SVG】svg入门相关推荐

最新文章

热门文章

13、g标签将多个形状组成一个组（group），方便复用。

14、defs标签自定义形状，它内部的代码不会显示，仅供引用，类似于template

16、image标签插入图片文件

17、animate标签产生动画效果

2、如果使用`<object>`、`<iframe>`、`<embed>`标签插入 SVG 文件，可以获取 SVG DOM。