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. redis主从复制和哨兵机制

    redis主从复制和哨兵机制 技术标签: redis 1.redis主从复制(master/slave模式) 主数据库可以进行读写操作,当写操作导致数据发生变化时会自动将数据同步给从数据库.而一般情况 ...

  2. object 转json 相互转换

    1.object 转json 2.json转object 参考   https://blog.csdn.net/justry_deng/article/details/80780175

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

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

  4. 启动一个线程是调用 run()还是 start()方法?

    启动一个线程是调用 start()方法,使线程所代表的虚拟处理机处于可运行状态, 这意味着它可以由 JVM 调度并执行,这并不意味着线程就会立即运行.run()方 法是线程启动后要进行回调(callb ...

  5. 一个 Redis 实例最多能存放多少的 keys?List、Set、 Sorted Set 他们最多能存放多少元素?

    理论上 Redis 可以处理多达 232 的 keys,并且在实际中进行了测试,每个实 例至少存放了 2 亿 5 千万的 keys.我们正在测试一些较大的值.任何 list.set. 和 sorted ...

  6. java-等待唤醒机制(线程中的通信)-线程池

    为什么需要线程间的通信 多个线程并发执行时,在默认情况下CPU时随机切换线程的,当我们需要多个线程共同完成一件任务,并且 希望他们有规律的执行,那么多线程之间需要一些协调通信,以此来帮我们达到多线程共 ...

  7. 使用jquery

    在https://jqueryui.com/download/把样式下载下来 然后解压复制到之前的文件夹里面 再到https://jqueryui.com/tabs/#mouseover里面找到一段代 ...

  8. springboot远程debug调试

    案例代码: https://www.cnblogs.com/youxiu326/p/sb_promotion.html 1.首先去编辑器打开项目    2.打开Edit Configurations ...

  9. eclipse更换工作空间后,需要修改哪些常用配置

    一.对于配置不太了解,第一次配置. 常用 (ps:配置我们在导航栏的 Windows --> preference 里进行配置) 1.首先,我们配置编译环境:Java --> Instal ...

  10. Linux 安装jdk1.8

    Linux安装jdk1.8 总结一句话就是:下载jdk1.8 ==> 解压 ==> 配置环境变量. 一.  jdk的下载,这里有两种方法: 1.去Oracle官网下载. 2.jdk1.8的 ...