svg简介

Scalable Vector Graphics

可缩放矢量图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

svg知识点

svg如何绘图

svg和cnavas区别

svg如何实现动画效果

svg应用场景

1.图表

2.图标 icon

3.动效

4.矢量图：由点/线/图形（基本图形）

SVG元素

开始

<svg width=“500px” height=“500px”>

</svg>

使用

1. 直线

<line x1="100" y1="100" x2="200" y2="100"></line>

    <style>

        svg{

           border:1px solid #000;

        }

        line{

           stroke:red;

        }

    </style>

</head>

<body>

      <svg width="500px" height="500px">

         <line x1="100" y1="100" x2="200" y2="200"></line>

      </svg>

</body>

2. 矩形

<rect x="50" y="50" width="100" height="100" rx="10"ry="20"></rect> （rx   ry 是矩形的圆角 ，不加也可以即没有圆角）  （自动填充为黑色）

3. 圆形

<circle r="50" cx="220" cy="100"></circle>     （自动填充为黑色）

4. 椭圆

<ellipse rx="100" ry="50" cx="400" cy="150"></ellipse>  （rx 横轴半径  ry 纵轴半径 ，cx,cy圆心坐标）  （自动填充为黑色）

5. 折线

<polyline points="60 50, 75 35, 100 50, 125 35, 150 50, 175 35, 190 50"></polyline>   （自动填充为黑色，变折线可进行以下处理）

    <style>

        svg{

           border:1px solid #000;

        }

    </style>

</head>

<body>

      <svg width="500px" height="500px">

         <polyline points="60 50, 75 35, 100 50, 125 35"></polyline>

         //默认为填充样式

      </svg>

</body>
        polyline{

           fill:transparent;

           stroke:red;

        }

        //设置polyline变折线

6. 多边形

<polygon points="125 125,130 140,120 140"></ polygon> （原理同polyline  区别在于polyline是线 polygon是图形）

7. ⽂本

<text x="125" y="220">hello,world</text>

样式属性

1.fill  填充

2.stroke  描边

3.stroke-width  线宽

4.stroke-opacity/fill-opacity

5.stroke-linecap

6.stroke-linejoin

path元素

1. M指令和L指令 （moveTo lineTo）

<path d = "M 10 10 L 20 10" />  （d 路径 ）

m指令和l指令

<path d = "m 10 10 l 20 10" />

大写表示绝对定位，小写表示相对定位

绝对坐标和相对坐标 相对于上一个移动距离

2.H和V命令

<path d="M 100 100 H 200 V 200"/>

水平（horizontal lineto）竖直（vertical lineto）方向移动距离

3.Z命令

<path d="M 100 100 H 200 V 200 z"/>

注：闭合 Z不区分大小写

4.圆弧指令

A命令 (elliptical Arc) 七个参数

rx ry x-axis-rotation large-arc-flag sweep-flag x y

• rx ry圆弧的x轴半径和y轴半径

• x-axis-rotation 圆弧相对x轴的旋转角度，默认是顺时针，可以 设置负值

• large-arc-flag 表示圆弧路径是大圆弧还是小圆弧 1大圆弧

• sweep-flag 表示从起点到终点是顺时针还是逆时针，1表示顺 时针，0表示逆时针

• x y 表示终点坐标，绝对或相对

<path d="M 100 100 A 70 120 90 1 1 150 200"></path>

贝塞尔曲线

1. 二次贝塞尔

Q x1 y1, x y

T x y  （拓展）

    <style>

        svg{

           border:1px solid #000;

        }

        path{

           fill:transparent;

           stroke:red;

        }

    </style>

</head>

<body>

      <svg width="500px" height="500px">

         <path d="M 100 100 Q 200 50 300 300 T 350 200"></path>

      </svg>

对称点

三次贝塞尔曲线

C x1 y1, x2 y2, x y

S x2 y2, x y

自动生成路径

Method Draw

地址： http://editor.method.ac/

SVG 渐变

1.线性渐变

<defs>  （定义）

<linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">

<stop offset="0%" style="stop-color:rgb(255,255,0);"/>

<stop offset="100%" style="stop-color:rgb(255,0,0);"/>

</linearGradient>

</defs>

<rect x="0" y="0" width="500" height="500"style="fill:url(#bg1)"/>

2.径向渐变

<defs>

<radialGradient id="bg2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

<stop offset="0%" style="stop-color:green;"/>

<stop offset="100%" style="stop-color:red;"/>

</radialGradient>

</defs>

<rect x="0" y="0" width="500" height="500" style="fill:url(#bg2)"/>

SVG 滤镜

1.高斯滤镜

<defs>

<filter id="Gaussian_Blur">

<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>

</filter>

</defs>

<rect x="0" y="0" width="500" height="500" fill=”yellow” style="filter:url(#Gaussian_Blur)"/>

2.其他滤镜

http://www.w3school.com.cn/svg/svg_filters_intro.asp

SVG 路径动画

1. stroke-dasharray： 100px;   切割线段，展示成虚线      stroke-dasharray： 10px   20px   30px; （切割线段的间隔）

2. stroke-dashoffset: 15px;      偏移量

抽风动画效果

   <style>

      line{

         stroke:red;

         stroke-width:10px;

         stroke-linecap:butt;

         stroke-dasharray:300px;

         stroke-dashoffset:300px;

         animation:move 2s linear infinite alternate-reverse;

      }

      @keyframes move{

         0% {

            stroke-dashoffset:300px;

         }

         100% {

            stroke-dashoffset:0;

         }

      }

   </style>

</head>

<body>

    <svg width = "500px" height = "500px">

      <line x1=100 y1=100 x2=400 y2=100></line>

    </svg>

</body>

js操作svg

1.getTotalLength(  )

获取路径总长度

    <svg width = "500" height = "500">

      <line x1=100 y1=100 x2=400 y2=100></line>

    </svg>

    <script>

       var svg = document.getElementsByTagName('svg')[0];

       var line = document.getElementsByTagName('line')[0];

       console.log(line.getTotalLength());

    </script>

2.getPointAtLength(x)

获取路径上距离起始点距离x长度的点的坐标

注：严格来说上面两方法只适用于path元素，但各个浏览器实现起来都会有一点区别。例如谷歌浏览器也能获取到line元素的路径长度。

viewPort  表示SVG可见区域的大小，画布大小

1.<svg width="500" height="300" ></svg>

宽500单位，高300单位

ViewBox 表示视区盒子

1.<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">

<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>

</svg>

2.preserveAspectRatio(作用的对象都是viewBox)

preserveAspectRatio="xMidYMid meet"

svg.setAttribute("preserveAspectRatio", "xMinYMin meet");

第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比（如果有）

第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐

设置填充方式

meet:保持纵横比缩放viewBox适应viewport

slice:保持纵横比同时比例小的方向放大填满viewport (在均匀缩放的同时保持viewbox的宽高比)

none: 扭曲纵横比以充分适应viewport

http://www.zhangxinxu.com/study/201408/svg-preserveaspectratio-meet-slice-none.html

JS 生成SVG元素

1、创建SVG元素需要指定命名空间

2、SVG元素对象一般通过调用setAttribute()方法来设定属性值

   <script>

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

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

       svg.setAttribute('width','200');

       svg.setAttribute('height','200');

       line.setAttribute('x1','100');

       line.setAttribute('y1','100');

       line.setAttribute('x2','150');

       line.setAttribute('y2','100');

       svg.appendChild(line);

       document.body.appendChild(svg);

    </script>

canvas与svg

canvas与svg

SVG特点：不依赖分辨率,支持事件处理器,最适合带有大型渲染区域的应用程序（比如谷歌地图）,复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）,不适合游戏应用 Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

特点：依赖分辨率,不支持事件处理器,弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像,最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

svg矢量图的更多相关文章

  1. Android中使用SVG矢量图（一）

    SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...

  2. Android 使用 SVG 矢量图

    android svg矢量图 可能包含的操作有: SVG图还包括改变颜色,透明度,大小,矩阵操作(平移.旋转.缩放),selector, (图标,背景,按钮),动画,等 setTint(int Col ...

  3. Perl+OpenGL 重绘inkscape生成的svg矢量图

    Perl+OpenGL 重绘inkscape生成的svg矢量图 还不够完善,先挖个坑,后面慢慢填 Code: [全选] [展开/收缩] [Download] (Untitled.pl) =info A ...

  4. svg矢量图绘制以及转换为Android可用的VectorDrawable资源

    项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Gr ...

  5. SVG矢量图学习实例

    从W3school上学习了一下SVG矢量图形,感觉和HTML相比还是有一些新的元素和属性的,一时间不能全部记住,特此留下笔记,供遗忘时作为参考 <!DOCTYPE html> <!- ...

  6. svg矢量图在flex布局中样式扭曲的问题

    问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...

  7. SVG矢量图【转】

    var iconArray=[ //'circle', //实心圆 //'rect', //矩形 //'roundRect', //圆角矩形 //'triangle', //三角形 //'diamon ...

  8. SVGO: Node.js 开发的 SVG 矢量图优化工具(svg压缩工具）

    SVG图片压缩 这是个通过借助npm包的一种方式去压缩svg的图片,由于阿里的图库自己创建的图标有大小的限制,当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩. 1.下载no ...

  9. SVG矢量图--爱心

    aixin.xml: <!-- height:width=viewportHeight:viewportWidth --> <vector xmlns:android="h ...

随机推荐

  1. manhattan plots in qqplot2

    ###manhattan plots in qqplot2library(ggplot2)setwd("~/ncbi/zm/XPCLR/")read.table("LW. ...

  2. Ubuntu16.04交叉工具链安装

    前言: 开发环境是64位的ubuntu16.04,交叉工具链是通过sudo apt-get install ....安装的,移植uboot2014.10,但是很奇怪,按照网上的介绍在start.s里面 ...

  3. Hibernate主键自增策略

    hibernate 主键生成策略配置: 通过 实体类映射文件中 <id>元素的 子元素 <generator> 元素进行配置 <generator> 常用配置: ( ...

  4. PythonStudy——Pycharm 小技巧

    分享Pycharm中一些不为人知的技巧 工欲善其事必先利其器,Pycharm 是最受欢迎的Python开发工具,它提供的功能非常强大,是构建大型项目的理想工具之一,如果能挖掘出里面实用技巧,能带来事半 ...

  5. LOJ 3059 「HNOI2019」序列——贪心与前后缀的思路+线段树上二分

    题目:https://loj.ac/problem/3059 一段 A 选一个 B 的话, B 是这段 A 的平均值.因为 \( \sum (A_i-B)^2 = \sum A_i^2 - 2*B \ ...

  6. docker基本命令使用

    学会使用docker命令帮助 docker help 子命令 查看docker镜像 docker images 搜索镜像 docker search 镜像名 下载镜像 docker pull 镜像名 ...

  7. Spring Cloud(Dalston.SR5)--Zuul 网关-Hystrix 回退

    当我们对网关进行配置让其调用集群的服务时,将会执行 Ribbon 路由过滤器,该过滤器在进行转发时会封装为一个 Hystrix 命令予以执行,Hystrix 命令具有容错的功能,如果"源服务 ...

  8. 游戏数据分析中“次日留存率”与“游戏生命周期第N天上线率”的SAS实现

    在游戏行业,次日留存率是个很重要的指标,对于评价一款游戏的优劣具有很重要的参考价值. 下面先看以下相关的定义: 用户留存:统计时间区间内,新登用户在随后不同时期的登录使用情况. 日次留存率:日新登用户 ...

  9. [蓝桥杯]ALGO-181.算法训练_According to Bartjens

    问题描述 计算器和计算机的大量普及也有其弊端.即便是受过专业技术训练的学生们也很可能缺乏计算能力.由于电脑的大量使用,很多人无法心算出7*8这样的算式,甚至是用纸和笔也算不出13*.不过谁在意呢? B ...

  10. mmap映射区和shm共享内存的区别总结

    [转载]原文链接:https://blog.csdn.net/hj605635529/article/details/73163513 linux中的两种共享内存.一种是我们的IPC通信System ...