初识 SVG

2020-07-20 本文已影响0人 sun_kk

背景
最近在做需求时，设计给的是 svg 的，但是因为定位麻烦，我转成了 png，结果被说变模糊了。无奈只能使用 svg。使用SVG过程中，遇到了一些问题，正好学习分享一下。

普遍认识：

SVG 是矢量的，也就是放大不模糊，不失真。
一般用作网络中的图标。

SVG

是用 XML 描述的一种规范。

HTML 与 XML
HTML：超文本标记语言。预定义标记（标签）。
XML：可扩展标记语言，可用来定义其他标记语言。没有固定标记。

例子：

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle x=10 y=10 cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

类似于 HTML，有元素（标签）和属性。

SVG 里区分大小写
SVG 里属性值必须要引号，包括数字

定位依靠元素的 x、y 属性

基本元素

矩形 rect
圆 circle
椭圆 ellipse
线 line
折线 polygon
多边形 polyline
路径 path
字形 glyph，类似与 path

常见属性

svg 以左上角为 x =0，y=0

x - x 位置
y - y 位置
cx - 椭圆圆心 x
cy - 椭圆圆心 y
rx、ry - 圆角，rx 为 x 的方向弧度，ry 为 y方向弧度
width
height
fill
fill-opacity
stroke
stroke-opacity
style
points - 定义折线和多边形点
d - 路径特有的属性，是一个 命令 + 参数 的序列

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

d 属性

参数都是 x y 的格式，根据前边命令表示的意思有些出入。
大写字母命令后边的参数表示绝对位置，小写字母命令后的参数表示相对位置。

m 10 10
M 10 10

M - move to - 只移动不绘制
L - line to - 移动加绘制
H - 只有一个参数 x - 绘制水平线
V - 只有一个参数 y - 绘制垂直线
Z(z) - 没有参数 - 绘制一条线到起始点
C - 贝塞尔曲线 - 三个参树 - 起点控制点、终点控制点、终点
S - 也是贝塞尔曲线 - 两个参数 - 如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点
Q - 二次贝塞尔曲线 - 两个参数 - 控制点、终点
T - 二次贝塞尔曲线 - 一个参数 - 终点
A - 弧形 - 七个参数 -

// 弧形单独写明
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx、ry 弧度
x-axis-rotation: 旋转情况（顺时针，可为负）
large-arc-flag: 决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
sweep-flag: 弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
x、y 终点坐标

// 绘制一个矩形的例子
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
<path d="M10 10 H 90 V 90 H 10 Z" />
<path d="M10 10 h 80 v 80 h -80 Z" />

引入方式

在 HTML 中直接书写 <svg> 标签

<svg style="height: 100px; width: 100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="0" y="0" rx="20" ry="30" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

svg 标签上的样式定义内部的元素
元素的样式具有最高优先级

声明样式块：

  <defs>
    <style type="text/css">
       #MyRect {
         stroke: black;
         fill: red;
       }
    </style>
  </defs>

不支持 css 中的伪类、渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css"><![CDATA[
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      ]]></style>
  </defs>
 
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
  
</svg>

使用 <embed> 标签

<embed style="fill: #409eff" src="test.svg" type="image/svg+xml" />

无法通过外部标签 style 样式控制 svg
上边 style 的 fill 属性并不能生效
大小：

如果加载的 svg 文件内 svg 未指定大小，默认 300 * 150

如果置顶了大小，则为实际大小
可按照 inline-block 处理
默认无 border

使用 <iframe> 标签

<iframe src="image.svg"></iframe>

满足 iframe 特性
同样无法通过 style 样式控制 svg
大小默认 iframe 大小 300 * 150（+ border）

使用 <object>

<object data="image.svg" type="image/svg+xml" />

表现类似与使用 <embed> 相同

SVG 常见用途

unicode 图标

利用的是 unicode 编码中预留的部分编码，自定义字体。

<font id="fontdemo" horiz-adv-x="1000">
  <font-face
    font-family="fontdemo"
    font-weight="500"
    font-stretch="normal"
    units-per-em="1024"
    ascent="896" // 上基线
    descent="-128" // 下基线
  />
  <missing-glyph />

  <glyph glyph-name="info-circle-fill" unicode="&#59460;" d="M512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m32-664c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8V440c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-272z m-32 344c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"  horiz-adv-x="1024" />
</font>

@font-face {
    font-family: "iconfont";
    /* IE9 */
    src: url('iconfont.eot?t=1594289303932');
    src:
    /* IE6-IE8 */
        url('iconfont.eot?t=1594289303932#iefix') format('embedded-opentype'), 
        url('data:application/x-font-woff2;charset=utf-8;base64,') format('woff2'),
        url('iconfont.woff?t=1594289303932') format('woff'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('iconfont.ttf?t=1594289303932') format('truetype'),
        /* iOS 4.1- */
        url('iconfont.svg?t=1594289303932#iconfont') format('svg');
}

使用 @font-face 自定义字体，然后在要使用的 HTML 标签中设定字体即可。

初识 SVG

SVG

基本元素

常见属性

d 属性

引入方式

SVG 常见用途

unicode 图标

猜你喜欢

热点阅读