欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SVG 学习

程序员文章站 2022-05-03 21:42:26
...

SVG 在 HTML 中

使用embed标签

<embed src="circle.svg" type="image/svg+xml" />

使用object标签

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

使用iframe标签

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

直接在HTML嵌入SVG代码

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

链接到SVG文件

<a href="circle1.svg">View SVG file</a>

SVG 形状

  • 矩形 <rect>
<rect x="" y="" rx="" ry="" width="" height="" style="fill:x;stroke:x;stroke-width:x;[fill-][stroke-]opacity:x"/>

x, y —> 横纵坐标
rx, ry —> 圆角
width, height —> 长和宽
fill —> 填充色
stroke —> 描边线颜色
stroke-width —> 描边线宽
fill-opacity —> 填充色透明度
stroke-opacity —> 描边色透明度
opacity —> 整体透明度

  • 圆形 <circle>
<circle cx="" cy="" r="" style=""/>

cx, cy —> 横纵坐标
r —> 半径
style —> 样式

  • 椭圆 <ellipse>
<ellipse cx="" cy="" rx="" ry="" style=""/>

cx, cy —> 横纵坐标
rx, ry —> 长短半轴
style —> 样式

  • 线 <line>
<line x1="0" y1="0"
      x2="100" y2="100"
      stroke="#000"
      stroke-width="2"/>

x1, y1 —> 起点坐标
x2, y2 —> 终点坐标
stroke —> 颜色
stroke-width —> 线宽

  • 多边形 <polygon>
<polygon points="x,x y,y z,z ..." style="fill:x;stroke:x;stroke-width:x;fill-rule:nonzero/evenodd"/>

points —> 点坐标
fill-rule:nonzero —> 字面意思是“非零”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。
fill-rule:evenodd —> 字面意思是“奇偶”。按该规则,要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。

  • 折线 <polyline>
<polyline points="x,x y,y z,z ..." style="fill:none;stroke:x;stroke-width:x"/>

points —> 点坐标

  • 路径 <path>
<path d=""
      fill="" stroke="" stroke-width="" />
  • 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 文本

普通文本

<text x=""  y="" style="">some text</text>

旋转文本

<text x=""  y="" style="" transform="rotate(X,Y,Z)">some text</text>

路径文本

<defs>
  <path id="path1" d="" />
</defs>

<text x="" y="" style="">
  <textPath xlink:href="#path1">some text</textPath>
</text>

分组文本

<text x="" y="" style="">Several lines:
  <tspan x="" y="">First line</tspan>
  <tspan x="" y="">Second line</tspan>
</text>

链接文本

<a xlink:href="" target="_blank">
  <text x="" y="" fill="">some text</text>
</a>

SVG Stroke 属性

  • stroke
    定义一条线
  • stroke-width
    定义线宽
  • stroke-linecap
    定义不同的末端:
    • butt —> 无样式/截断
    • round —> 圆形端
    • square —> 方形端
  • stroke-dasharray
    用于创建虚线

SVG 滤镜

  • feBlend - 与图像相结合的滤镜
  • feColorMatrix - 用于彩色滤光片转换
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - 过滤阴影
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight - 用于照明过滤
  • fePointLight - 用于照明过滤
  • feSpotLight - 用于照明过滤

SVG 模糊效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg> 

代码解析:

  • 滤镜定义放置在<defs>当中
  • <filter>标签指定所需滤镜
  • <feGaussianBlur>定义模糊效果
  • in="SourceGraphic定义了由整个图像创建效果
  • stdDeviation定义模糊量
  • 最后在<rect>元素中链接滤镜

SVG 阴影

相关元素:

  • <feOffset>
  • <feBlend>

注:结合元素模糊可以达到更好的阴影效果

SVG 渐变

两种类型:

  • Linear
    • <linearGradient> —> 线性渐变
  • Radial
    • <radialGradient> —> 放射性渐变
相关标签: SVG