SVG基础用法 | 小浩之随笔

SVG

发布日期: 2023-08-18

阅读次数:

什么是SVG

可缩放矢量图形,是一种用于描述二维的矢量图形，基于 XML 的标记语言。
简单来说用svg可以改变图像的大小颜色等

SVG公共属性

stroke: 边框颜色
fill: 填充色
fill-opacity: 填充透明度
stroke-width: 边框宽度
stroke-dasharray: 虚线边框例：“4,3” 第一个值是点划线的长度，第二个值是点划线之间的间距
stroke-opacity: 描边透明度
stroke-linecap: 线两端的样式 butt 直角 square 直角 round 圆角
stroke-linejoin: 两条线交界处样式 miter 直角 round 圆角 bevel 斜接
transform: 变形
translate: 平移
rotate: 旋转（围绕svg左上角点）
skewX: 斜切，逆时针压缩例：skewX(角度数)
skewY: 斜切，顺时针压缩
scale: 缩放例：scale(缩放比例，缩放比例) 只传一个默认两个相同

viewBox属性

viewBox="x, y, width, height"
x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

viewBox="0,0,40,30"相当于在SVG上圈起来的视图，然后把圈起来的部分铺满整个SVG大小。

preserveAspectRatio属性

此属性也是应用在<svg>元素上，对齐、纵横比缩放viewBox区域。

preserveAspectRatio="xMidYMid meet"

第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比。
其中，第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐。

第1个值含义:
xMin: viewport和viewBox左边对齐
xMid: viewport和viewBox x轴中心对齐
xMax: viewport和viewBox右边对齐
YMin: viewport和viewBox上边缘对齐。注意Y是大写。
YMid: viewport和viewBox y轴中心点对齐。注意Y是大写。
YMax: viewport和viewBox下边缘对齐。注意Y是大写。

第2个值含义:
meet: 保持纵横比缩放viewBox适应viewport，受
slice: 保持纵横比同时比例小的方向放大填满viewport，攻
none: 扭曲纵横比以充分适应viewport，变态

<svg id="svg" width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="80" height="80" fill="#cd0000"/>
</svg>

rect 矩形属性

x: 矩形左上角点的横坐标
y: 矩形左上角点的纵坐标
rx: 圆角
ry: 圆角
width: 宽
height: 高

<svg width="500px" height="500px">
  <rect x="50" y="20" width="150" height="150"/>
</svg>

circle 圆属性

cx: 圆中心点的横坐标
cy: 圆中心点的纵坐标
r: 半径

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

ellipse 椭圆属性

cx: 椭圆中心点的横坐标
cy: 椭圆中心点的纵坐标
rx: x轴半径
ry: y轴半径

<svg width="500px" height="500px">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

line 直线属性

x1: 起点的横坐标
y1: 起点的纵坐标
x2: 终点的横坐标
y2: 终点的纵坐标

<svg width="500px" height="500px">
 <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

polyline 折线属性

points: 点坐标的集合，例："20,20 40,25"表示（20,20）(40,25)两个点

<svg width="500px" height="500px">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

polygon 多边形属性

points: 点坐标的集合，例："200,10 250,190"表示（200,10）(250,190)两个点

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

clipPath 裁剪标签

<clipPath>标记的作用相当于一个蒙版，它能限制哪些地方可见，哪些地方不可见。<clipPath>标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来).
<clipPath>元素需要使用clip-path属性来引用。

<svg width="120" height="120" viewPort="0 0 120 120">
    <defs>
        <clipPath id="myClip">
            <circle cx="30" cy="30" r="20"/>
            <circle cx="70" cy="70" r="30"/>
        </clipPath>
    </defs>
    <rect x="10" y="10" width="100" height="100" clip-path="url(#myClip)" fill='red' />
</svg>

g 标签

<g>标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用<use>进行复制使用。

<svg width="500px" height="500px">
  <g stroke="green" fill="white" stroke-width="5">
     <circle cx="25" cy="25" r="15"/>
     <circle cx="40" cy="25" r="15"/>
     <circle cx="55" cy="25" r="15"/>
     <circle cx="70" cy="25" r="15"/>
   </g>
</svg>

defs 标签

应用场景：没有直接显示的元素放到defs标签中,例如：蒙版、渐变等

use 标签

<use>用于复制一个形状节点。
xlink:href指定所要复制的节点，x,y是左上角的坐标。

<svg width="100%" height="300"  viewBox='0 0 50 100'>
  <style>
    .classA { fill:red }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>
 
  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

symbol 标签

<symbol>标记的作用是定义一个图像模板，你可以使用<use>标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用<use>实例化后才会显示。

<svg viewBox="0 0 150 150" height='300'>
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<use xlink:href="#sym01" x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01" x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01" x="0" y="100" width="50" height="25"/>
</svg>

tspan 标签

<tspan>标记的作用是将一段文本包裹起来，你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰

<svg width="250" height="100" viewBox="0 0 250 100">
  <style>
    text{
        font: 20px Verdana, Helvetica, Arial, sans-serif;
    }
    tspan{
      fill: red;
      font-weight: bold
    }
  </style>
    <text x="15" y="30">你丫的
      <tspan>不是</tspan> 
      一个东西
    </text>
</svg>

text 标签

<text>用来定义文字文本。

<svg height="30" width="200">
 <text x="0" y="15" fill="red">SVG是个好东西！</text>
</svg>

在<text>元素里，我们可以使用<tspan>元素给文字分组，每个<tspan>元素可以定义自己的格式/样式/位置。

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">这里有几行文字：
    <tspan x="10" y="45">这是第一行</tspan>
    <tspan x="10" y="70">这是第二行</tspan>
  </text>
</svg>

给文本添加超链接，这需要使用 <a> 标记：

<svg height="30" width="200">
  <a xlink:href="http://www.huhaowb.com" target="_blank">
    <text x="0" y="15" fill="red">小浩之随笔</text>
  </a>
</svg>

path 路径

大写:绝对路径；小写：相对路径。

d: 
- M：移动画笔到某个点
- L：直线
- H：平行线
- V：垂直线
- Z: 闭合
- A：弧线
  - 参数：
  - 1. x轴半径
  - 2. y轴半径
  - 3. 旋转角度
  - 4. 大角度还是小角度 0 小角度 1 大角度
  - 5. 顺时针还是逆时针 0 逆时针 1 顺时针
  - 6. 终点x坐标
  - 7. 终点y坐标
- C：三次贝塞尔曲线
- S：三次贝塞尔曲线的对称
- Q：二次贝塞尔曲线
- T：二次贝塞尔曲线的对称

<svg height="400" width="450">
	  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
	</svg>

textPath 路径

处理能沿直线方向写文字外，还能够使用<path>先定义一条路径，让文字沿着定义好的路径排列。textPath标记的作用就是放在<text>标记内部引用预定义的<path>，引用时，我们需要使用xlink:href属性指明需要引用的路径的ID。

<svg width="100%" height="100%" viewBox="0 0 1000 300">
  <defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      我先往上去，然后往下去，然后再往上去，漂亮吧！
    </textPath>
  </text>
  <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>

linearGradient 线性渐变

<linearGradient>标记必须放在<defs>标记内
线性渐变色可以定义成水平渐变色，垂直渐变色和斜向渐变色：
当y1和y2相等，而x1和x2不等时，就形成了水平渐变色
当y1和y2不等，而x1和x2相等时，就形成了垂直渐变色
当y1和y2不等，而x1和x2也不等时，就形成了斜向渐变色

水平渐变色:

<svg height="150" width="400">
 <defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">  
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
 </defs>
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

垂直渐变色:

<svg height="150" width="400">
 <defs>
  <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />   
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
  </linearGradient>
 </defs>
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

radialGradient 径向渐变

<radialGradient>标记必须放置在标记内。
cx,cy和r属性定义了辐射的最大圆，fx和fy属性定义了辐射的焦点
渐变色是有两个或两个以上的颜色组成。各个颜色使用<stop>标记定义。offset定义了渐变色的起始位置和终止位置。
filll属性里指明了需要引用的渐变色的id
cx: 渐变中心点x坐标占容器x坐标的比例，取值范围：0~1
cy: 渐变中心点y坐标占容器y坐标的比例，取值范围：0~1
r: 渐变半径占容器x坐标和y坐标的比例，取值范围：0~1
fx：渐变焦点x坐标占容器x坐标的比例，取值范围：0~1
fy: 渐变焦点y坐标占容器y坐标的比例，取值范围：0~1

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

赏