svg学习-常用标签的使用

简单介绍：

可伸缩矢量图形。定义用于网络的基于矢量的图形。使用xml编写的。

所有的开启标签必须有关闭标签！

无法直接给svg元素设置填充、边框。但是可以通过style样式给svg设置border

svg标签内，绘制所有图形的长度单位、字体大小等都不需要带单位

与canvas的区别：

canvas绘制的是位图，svg绘制的是矢量图。
canvas是html标签；svg是基于xml编写的

在html文件中引入svg:

simpleSvg.svg文件内容如下

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


<!-- xmlns设置svg命名空间; version设置svg的版本; height/width:设置它的宽高 -->
<!-- svg:根元素。包裹所有的svg标签 -->
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" x="0" y="0" fill="pink"></rect>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

必须以.svg的后缀名

第一行代码包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素

simpleSvg.html文件

<!-- 1. 以iframe标签的形式引入 -->
  <!-- <iframe src="./simpleSvg.svg" width="300px" height="300px" frameborder="0"></iframe> -->

  <!-- 2. 以图片的形式 -->
  <!--图片的宽高是：300*150-->
  <img src="./simpleSvg.svg" alt="">

  <!-- 3. 以背景的形式 -->
  <!--
     对于svg和rect标签：宽高设置了100%；他们的宽度和高度就会和div一样；
     对于circle：设置了固定宽高，它的宽高和坐标位置始终固定
   -->
  <div class="box"></div>

  <!-- 4. 以svg标签的形式引入 -->
  <!-- <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red"/> -->

svg中一般通过单个属性的方式设置元素的外观；有些属性也可以通过style="fill=red的形式设置"。但推荐使用单个属性的方式

svg中的基本图形：

矩形: <rect>
- width/height: 矩形的宽高
- x/y: 矩形左上角的坐标.默认（0，0）。包括边框在内。
- fill: 填充颜色。当值为transparent或者none时表明没有背景颜色；不显示的设置的话，默认背景色为黑色。
- stroke: 边框颜色。不设置，且不写stroke-width的情况下，默认是没有边框的
- stroke-width: 边框宽度
- stroke-opacity：边框不透明度。值在0-1之间。
- fill-opacity：填充的不透明都。值在0-1之间。
- opacity: 定义包括边框和填充在内的整个元素的不透明都。值在0-1之间。
- rx/ry: 设置巨型x/y轴方向的圆角.如下图
部分属性是可以通过style设置，比如：style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"。但像一些长度单位，最好用单个属性形式。
```
<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" x="20" y="20" rx="12" ry="18"
      style="fill:rgb(0,0,255);stroke-width:1;
      stroke:rgb(0,0,0)"/>
  </svg>
```

圆形：<circle>

cx/cy: 定义圆心的x/y轴坐标。默认是(0,0)
r: 半径

<circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red"/>

线段: <line>

x1/y1: 线段的起始x/y坐标
x2/y2: 线段的结束x/y坐标

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

椭圆：<ellipse>
- cx/cy: 圆心x/y坐标
- rx/ry: x/y方向的半径。不包含边框。当rx=ry的时候，就是圆
折线：<polyline>
```
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60 60,60"
      style="fill:white;stroke:red;stroke-width:2"/>
```
用points描述转折点的坐标；一个坐标点的x/y轴坐标用逗号隔开；相邻两个坐标点用空格隔开（在points中逗号和空格符号是等价的，可以使用其中任何一种）
多边形： <polygon>
```
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
```
用points描述对变形各个角的坐标；同一个角的x/y坐标用逗号隔开；相邻角的坐标用空格隔开；结束点和开始点会自动链接起来（在points中逗号和空格符号是等价的，可以使用其中任何一种）

polyline和polygon的区别就是一个闭合，一个不闭合
路径：<path>

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

在绘制路径的过程中，d的值，, === 空格 ，所有用空格的地方都可以用逗号替代
- M/m: 表示路径的起始坐标。如果是小写的m，如m10 20，这个坐标是相对于它的上一个点而言的。如果一个路径有多个M/m,就会绘制多条路径，每条路径的起始坐标就是M/m对应的坐标。
```
<path d="M150 150 L150 200 M100 100 L100 50" fill="none" stroke="red" stroke-width="2"/>
```
- L/l: 绘制路径中非起始坐标的普通点。如果是l,则该点的坐标是相对于他上一个元素而言的
- H/h: 绘制水平线。H后面跟一个表示x轴坐标的数字就可以了。y坐标默认与上一个点的坐标相同
```
<path d="M250 150 L150 350 H250" />
```
- V/v: 绘制垂直线。H后面跟一个表示y轴坐标的数字就可以了。x坐标默认与上一个点的坐标相同
- ```
<path d="M250 150 L150 350 V250" />
```
  如果H/V后面跟了多个数值，则每一个数值被认为是一次单独的绘制线条的命令，而不会像L那样将两个数值和起来。
  
  如果用h/v,后面跟的数字表示与上一个点的距离
- C/c:
- S/s
- Q/q:
- T/t:
- A/a: 绘制弧线。
  
  A后面跟的5个值分别代表： x轴半径(150)、y轴半径（100）、旋转角度、弧长、方向、结束点x/y轴坐标
  
  旋转角度：以水平向又为0°，旋转角度是指弧线对应的椭圆围绕圆心顺时针旋转的角度，上图表示旋转45°。
  
  弧长：对应值：0-小弧长；1-大弧长；分别对应图中右上角和左下角
  
  方向：对应值：0-逆时针；1-顺时针；分表表示从开始点(M)向结束点画椭圆，是逆时针还是顺时针，对应的圆心的位置也不一样
- Z/z: 表示闭合路径--默认路径是不闭合的线条。一般放在路径的最后面。后面不跟值

posted on 2021-06-20 10:58 妖娆的油条2号阅读(1055) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

svg学习-常用标签的使用

导航

公告