android svg支持image标签 svg常用图形标签

转载

mob6454cc649dc8 2023-07-27 21:15:25

文章标签 ci xml SVG 文章分类 Android 移动开发

简单介绍：

可伸缩矢量图形。定义用于网络的基于矢量的图形。使用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>

android svg支持image标签 svg常用图形标签_xml

圆形：<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"/>

android svg支持image标签 svg常用图形标签_ci_02

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" />

android svg支持image标签 svg常用图形标签_ci_03

如果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)向结束点画椭圆，是逆时针还是顺时针，对应的圆心的位置也不一样