SVG是一种XML语言,类似XHTML,可以用来绘制矢量图形,例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以形变(be transformed)、合成、或者通过滤镜完全改变外观。

SVG文件的基本属性最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”,越后面的元素越可见。

如何引入svg

  • 使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本。
  <embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
  • 使用 <object> 标签 <object> 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。
  <object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
  • 使用 <iframe> 标签 <iframe> 标签可工作在大部分的浏览器中。
  <iframe src="rect.svg" width="300" height="100"></iframe>

基本形状

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/> <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

矩形 rect

  • x 矩形左上角的x位置
  • y 矩形左上角的y位置
  • width 矩形的宽度
  • height 矩形的高度
  • rx 圆角的x方位的半径
  • ry 圆角的y方位的半径

圆形 circle

  • r 圆的半径
  • cx 圆心的x位置
  • cy 圆心的y位置

椭圆 ellipse

  • rx 椭圆的x半径
  • ry 椭圆的y半径
  • cx 椭圆中心的x位置
  • cy 椭圆中心的y位置

线条 line

  • x1 起点的x位置
  • y1 起点的y位置
  • x2 终点的x位置
  • y2 终点的y位置

多边形 polygon

  • points 点集数列

    (每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。路径绘制完后闭合图形,所以最终的直线将从位置(2,2)连接到位置(0,0)。)

路径 path (强大)

  • d 一个点基数列

    path元素的形状是通过属性d定义的,属性d的值是一个“命令+参数”的序列

    每一个命令都用一个关键字母来表示,比如,字母“M”表示的是“Move to”命令,当解析器读到这个命令时,它就知道你是打算移动到某个点。跟在命令字母后面的,是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令,应该写成“M 10 10”。这一段字符结束后,解析器就会去读下一段命令。每一个命令都有两种表示方式,一种是用大写字母,表示采用绝对定位。另一种是用小写字母,表示采用相对定位(例如:从上一个点开始,向上移动10px,向左移动7px)

    直线命令

    • “Move to”命令M x ym dx dy(移动画笔)
    • “Line to”命令L x y (or l dx dy) 需要两个参数,分别是一个点的x轴和y轴坐标
    • H x (or h dx) V y (or v dy) H,绘制水平线。V,绘制垂直线。这两个命令都只带一个参数,标明在x轴或y轴移动到的位置,因为它们都只在坐标轴的一个方向上移动

    闭合命令

    • Z (or z)

    曲线命令

    我们从稍微复杂一点的三次贝塞尔曲线C入手,三次贝塞尔曲线需要定义一个点和两个控制点,所以用C命令创建三次贝塞尔曲线,需要设置三组坐标参数:

    C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

    这里的最后一个坐标(x,y)表示的是曲线的终点,另外两个坐标是控制点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点。如果你熟悉代数或者微积分的话,会更容易理解控制点,控制点描述的是曲线起始点的斜率,曲线上各个点的斜率,是从起点斜率到终点斜率的渐变过程。

    弧形

    基本上,弧形可以视为圆形或椭圆形的一部分。假设,已知椭圆形的长轴半径和短轴半径,并且已知两个点(在椭圆上),根据半径和两点,可以画出两个椭圆,在每个椭圆上根据两点都可以画出两种弧形。所以,仅仅根据半径和两点,可以画出四种弧形。为了保证创建的弧形唯一,A命令需要用到比较多的参数:

     A rx ry x-axis-rotation large-arc-flag sweep-flag x y
    a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

文字 text

<text x="10" y="10">Hello World!</text>

设置文字属性

文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性,类似于它们的CSS同行,用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明:font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

编写引入svg的更多相关文章

  1. vue-cli3引入svg图标全过程以及遇到的坑

    https://blog.csdn.net/weixin_41229588/article/details/101159755 一.配置 1.安装依赖: npm install svg-sprite- ...

  2. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  3. react使用引入svg的icon;svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  4. 31、vue-cli3引入封装svg图标

    svg图标放大不失真,png会出现失真现象. 一.方法一 1.在对应vue项目里添加插件 vue add svg-sprite 输入 Y 2.在执行 npm install svgo svgo-loa ...

  5. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  6. svg高级应用及动画

    canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求.但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使 ...

  7. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  8. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  9. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. 创建自定义ClassLoader,绕过双亲委派

    1.什么是类加载 通过javac将.java文件编译成.class字节码文件后,则需要将.class加载到JVM中运行,哪么是谁将.class加载到JVM的呢?那就是类加载器啦. 2.类加载器类型 B ...

  2. 什么是Spring MVC框架的控制器?

    控制器提供一个访问应用程序的行为,此行为通常通过服务接口实现.控制器解析用户输入并将其转换为一个由视图呈现给用户的模型.Spring用一个非常抽象的方式实现了一个控制层,允许用户创建多种用途的控制器.

  3. Memcached 服务特点及工作原理是什么?

    a.完全基于内存缓存的 b.节点之间相互独立 c.C/S 模式架构,C 语言编写,总共 2000 行代码. d.异步I/O 模型,使用 libevent 作为事件通知机制. e.被缓存的数据以 key ...

  4. JPA、JTA、XA相关索引

    JPA和分布式事务简介:https://www.cnblogs.com/onlywujun/p/4784233.html JPA.JTA与JMS区别:https://www.cnblogs.com/y ...

  5. 什么是 spring 装配?

    当 bean 在 Spring 容器中组合在一起时,它被称为装配或 bean 装配.Spring 容器需要知道需要什么 bean 以及容器应该如何使用依赖注入来将 bean 绑定 在一起,同时装配 b ...

  6. 如何理解 Spring 中的代理?

    将 Advice 应用于目标对象后创建的对象称为代理.在客户端对象的情况下,目 标对象和代理对象是相同的. Advice + Target Object = Proxy

  7. Linux分区问题

    一.基本分区的作用及其大小 /boot分区: 存放引导文件和Linux内核文件等. 引导文件:判断启动哪一个操作系统或启动哪个内核. 内核:管理硬件和软件资源,程序与硬件之间的桥梁. 分区大小:100 ...

  8. ubuntu sublime text3 python 配置 sublime text3 python 配置

    ubuntu sublime text3 python 配置     1.安装sublime text 3 安装过程非常简单,在terminal中输入: sudo add-apt-repository ...

  9. Linux文件管理 | Liunx 常用命令

    文件与目录基本操作 目录: 一.显示文件内容 cat 命令 more 命令 less 命令 head 命令 tail 命令 二.文件内容查询(grep) 三.文件查找命令 find 命令 locate ...

  10. C语言类型转换原理

    C语言类型转换 int a; a=1.23 这里把1.23赋值给a发生了隐式转换,原理如下: int a; float b=3.14; a=b; b赋值给a的过程:首先找一个中间变量是a的类型(该例中 ...