SVG 入门笔记

一.SVG 简介

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

二.SVG应用

图表视图(echart)、地图视图(WEB-GIS)
形象(AI)的全网应用
UI 产品的设计
SVG 动画

三.创建 SVG 图像

SVG 文档基本结构

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在这里绘制图像 -->
</svg>

基本形状和属性

　　基本图形：<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>

　　基本属性：fill、stroke、stroke-width、transform

1.基本形状-圆形

点(0,0) 为图像左上角。水平向右移动时 x 坐标增大，垂直向下移动时 y 坐标增大。

- cx属性定义的圆心的x坐标
- cy属性定义的圆心的y坐标
- r属性定义的圆半径

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>...</title>
  <desc>...</desc>
  <!-- 在这里绘制图像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
</svg>

2.基本形状-椭圆

- cx属性定义的椭圆中心的x坐标
- cy属性定义的椭圆中心的y坐标
- rx属性定义的水平半径
- ry属性定义的垂直半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg

3.基本形状-直线

- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

4.基本形状-矩形

- x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
- y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
- width定义矩形宽
- height定义矩形高
- rx定义x方向的圆角半径
- ry定义y方向的圆角半径
- CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

5.基本形状-多边形

- points 属性定义多边形每个角的 x 和 y 坐标

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

6.基本形状-多段线

- points 属性定义多段线每个角的 x 和 y 坐标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

7.其他基本图形-路径

所有的基本形状都是通用的 <path> 元素的快捷写法。

- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 100 L50 250 L250 250 Z" />
</svg>

定义了一条路径，它开始于位置150 100，到达位置50 250，然后从那里开始到250 250，最后在150 0关闭路径。

四.其他SVG标签

1. 文本 <text></text>

2.路径上的文字 <textPath></textPath>

　　详情：https://www.runoob.com/svg/svg-text.html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

3.分组 <g></g>

<g>元素会将所有子元素作为一个组合，通常还有一个唯一的id作为名称;
每个组合还可以拥有自己的<title>和<desc>来供基于文本的xml应用程序识别或者为视障用户提供更好的可访问性;
阅读器会读取<title>和<desc>元素的内容。鼠标悬停或者轻触组合内的图形时，会显示<title>元素内容的提示框。
<g>元素可以组合元素并可以提供一些注释，组合还可以比较嵌套;
标签中指定的所有样式会应用于组合内的所有子元素

4.重复元素 <use></use>

复杂的图形中经常会出现重复元素，svg 使用<use>元素为定义在<g>元素内的组合或者任意独立图形元素提供了类似复杂黏贴的能力;
定义了一组<g>图形对象后，使用<use>标签再次显示它们。要指定想要的重用的组合就给xlink:href属性指定URI即可，同时还要指定x和y的位置以表示组合应该移动到的位置。
<use>元素并不限制只使用在同一个文件内的对象，还可以指定任意有效的文件或者URI.

5.被引用元素的容器 <defs></defs>

SVG规范推荐我们将所有想要复用的对象放置在元素内，这样SVG阅读器进入流式环境中就能更轻松地处理数据。
由于组合在<defs>元素内，它们不会立刻绘制到屏幕上，而是作为"模板"供其他地方使用。

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
  <title>...</title>
  <desc>...</desc>
  
  <defs>
    <g id='all' style='stroke:black'>
      <desc>框架</desc>
      <rect x='0' y='41' width='60' height='60' />
      <polyline points='0 41, 30 0, 60 41' />
      <polyline points='30 110, 30 71, 44 71， 44 101' />
    </g>
    
    <g id='one' style='fill:none; stroke:green'>
      <desc>第一部分</desc>
      <circle cx='10' cy='10' r='10' />
      <line x1='10' y1='20' x2='10' y2='44' />
      <polyline points='1 58, 10 44, 19 58' />
      <polyline points='1 24, 10 30, 19 24' />
    </g>
    
    <g id='tow' style='fill:none; stroke:red'>
      <desc>第二部分</desc>
      <circle cx='10' cy='10' r='10' />
      <polyline points='10 20, 10 34, 0 44, 20 44, 10 34' />
      <line x1='4' y1='58' x2='8' y2='44' />
      <line x1='12' y1='44' x2='16' y2='58' />
      <polyline points='1 24, 10 30, 19 24' />
    </g>

    <g id='couple'>
      <desc>组合</desc>
      <use xlink:href='#one' x='0' y='0'/>
      <use xlink:href='#tow' x='25' y='0'/>
    </g>
  </defs>
  <use xlink:href='#all' x='0' y='0' style='fill:#cfc'/>
  <use xlink:href='#couple' x='70' y='40'/>
</svg>

6.添加图片<image>

<svg width='310' height='310' viewBox='0 0 310 310' xmlns='http://wwww.w3.org/2000/svg'>
  <image xlink:href='3.jpg' x='72' y='92'
    width='160' height='120'
  />
</svg>

posted @ 2022-03-25 13:38 zigood 阅读(330) 评论(0) 编辑收藏举报

刷新页面返回顶部

zigood

SVG 入门笔记

公告