SVG 学习笔记

设计博客主题，想摆脱二进制的限制，拥抱矢量图的怀抱

SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。

浏览器支持不同

这里有几个重点一定要记住：

• SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）
• SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。

90dpi: 1cm ~ 35.43px

和大多数坐标系一样，顶点在左上，右下为正

形状：

• rect | x y width height rx ry
• circle | r cx cy
• ellipse | rx ry cx cy
• line | x1 y1 x2 y2
• polyline | points: "x1 y1, x2 y2, ... xn, yn"
• polygon | points: "x1 y1, x2 y2, ... x1, y1"
• path | d: 什么玩意，搞不懂

PATH

属性d为 命令 + 参数

直线

• M |只移动，不画
  • M x y
  • m dx dy
• L |画
  • L x y
  • l dx dy
• H / V |水平 / 垂直
  • H x
  • h dx
  • V y
  • v dy
• Z z |闭合路径，回到起点

曲线

• C |三次贝塞尔曲线
  • C x1 y1 x2 y2 x y
  • c dx1 dy1 dx2 dy2 dx dy
• S |默认第一个控制点为前一个控制点的中心对称
  • S x2 y2 x y
  • s dx2 dy2 dx dy
• Q |二次贝塞尔曲线
  • Q x1 y1 x y
  • q dx1 dy1 dx dy
• T |默认控制点为前一个控制点的中心对称
  • T x y
  • t dx dy
• A |圆弧 两点和长短半径可以确定四种圆弧 laf大角度 sf顺时针
  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

属性

颜色

• fill 内部颜色
• stroke 描边颜色
• fill-opacity 填充色的不透明度，浮点数
• stroke-linecap 终点边框形状
  • butt
  • square
  • round
• stroke-linejoin 连接处边框形状
  • miter
  • round
  • bevel
• stroke-dasharray="l1, l2" 虚线 实线长度, 虚线长度

css可以实现hover伪类的属性

<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style><![CDATA[
       #MyRect:hover {
         stroke: black;
         fill: red;
       }
    ]]></style>
  </defs>
  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

中间一些 好像用不到，也记不住，以后深入再看

剪切

剪切该部分

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

遮罩，覆盖在上面，可实现渐变效果

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>

其他内容无关痛痒，留意一下自定义字体吧

学了下贝塞尔曲线，有点深奥，有点美丽。

贝塞尔曲线