垦荒学园
  • 中文

      • SVG 参考手册

      本手册提供 SVG 元素和属性的快速参考。

      基本形状元素

      元素描述关键属性
      <rect>矩形x, y, width, height, rx, ry
      <circle>圆形cx, cy, r
      <ellipse>椭圆cx, cy, rx, ry
      <line>直线x1, y1, x2, y2
      <polyline>折线points
      <polygon>多边形points
      <path>路径d

      文本元素

      元素描述关键属性
      <text>文本x, y, dx, dy, text-anchor
      <tspan>文本片段x, y, dx, dy
      <textPath>路径文本href, startOffset

      容器元素

      元素描述用途
      <svg>SVG 根元素定义 SVG 画布
      <g>组组合多个元素
      <defs>定义定义可复用元素
      <symbol>符号定义可复用图形
      <use>使用引用已定义元素

      渐变元素

      元素描述关键属性
      <linearGradient>线性渐变x1, y1, x2, y2, gradientUnits
      <radialGradient>径向渐变cx, cy, r, fx, fy
      <stop>渐变色标offset, stop-color, stop-opacity

      滤镜元素

      元素描述
      <filter>滤镜容器
      <feGaussianBlur>高斯模糊
      <feDropShadow>阴影
      <feOffset>偏移
      <feBlend>混合
      <feColorMatrix>颜色矩阵
      <feMerge>合并
      <feFlood>填充
      <feComposite>组合

      路径命令

      直线命令

      命令名称参数示例
      Mmovetox,yM10,20
      Llinetox,yL50,60
      H水平线xH100
      V垂直线yV80
      Z闭合无Z

      曲线命令

      命令名称参数描述
      C三次贝塞尔x1,y1 x2,y2 x,y两个控制点
      S平滑三次贝塞尔x2,y2 x,y一个控制点
      Q二次贝塞尔x1,y1 x,y一个控制点
      T平滑二次贝塞尔x,y无控制点
      A弧线rx,ry rot large sweep x,y椭圆弧

      通用属性

      填充和描边

      属性描述值示例
      fill填充颜色#3b82f6, rgb(59,130,246), none
      fill-opacity填充透明度0.5
      fill-rule填充规则nonzero, evenodd
      stroke描边颜色#3b82f6, none
      stroke-width描边宽度2, 2px
      stroke-opacity描边透明度0.8
      stroke-linecap端点样式butt, round, square
      stroke-linejoin连接样式miter, round, bevel
      stroke-dasharray虚线模式5,3, 10,5,2,5
      stroke-dashoffset虚线偏移10

      透明度和可见性

      属性描述值示例
      opacity整体透明度0.5
      visibility可见性visible, hidden
      display显示inline, none

      变换

      属性描述值示例
      transform变换translate(10,20), rotate(45), scale(1.5)
      transform-origin变换原点center, 50% 50%

      变换函数

      函数描述示例
      translate(x,y)平移translate(100,50)
      rotate(angle)旋转rotate(45)
      rotate(angle,cx,cy)围绕点旋转rotate(45,100,100)
      scale(x,y)缩放scale(1.5), scale(2,1)
      skewX(angle)X 倾斜skewX(30)
      skewY(angle)Y 倾斜skewY(30)
      matrix(a,b,c,d,e,f)矩阵变换matrix(1,0,0,1,0,0)

      文本属性

      属性描述值示例
      font-family字体Arial, sans-serif
      font-size字号16, 16px, 1.2em
      font-weight字重normal, bold, 700
      font-style字体样式normal, italic
      text-anchor文本对齐start, middle, end
      text-decoration文本装饰underline, line-through
      letter-spacing字母间距2px
      word-spacing单词间距5px

      颜色格式

      <!-- 命名颜色 -->
fill="red"
fill="steelblue"

<!-- 十六进制 -->
fill="#ff0000"
fill="#f00"

<!-- RGB -->
fill="rgb(255, 0, 0)"
fill="rgb(100%, 0%, 0%)"

<!-- RGBA -->
fill="rgba(255, 0, 0, 0.5)"

<!-- HSL -->
fill="hsl(0, 100%, 50%)"

<!-- HSLA -->
fill="hsla(0, 100%, 50%, 0.5)"

      viewBox 和 preserveAspectRatio

      viewBox

      <svg viewBox="min-x min-y width height">
<!-- 示例 -->
<svg viewBox="0 0 100 100">

      preserveAspectRatio

      <svg preserveAspectRatio="align meetOrSlice">

<!-- 对齐值 -->
xMinYMin | xMidYMin | xMaxYMin
xMinYMid | xMidYMid | xMaxYMid
xMinYMax | xMidYMax | xMaxYMax
none

<!-- 示例 -->
<svg preserveAspectRatio="xMidYMid meet">
<svg preserveAspectRatio="xMinYMin slice">
<svg preserveAspectRatio="none">

      常用滤镜示例

      阴影

      <filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#00000040"/>
</filter>

      模糊

      <filter id="blur">
  <feGaussianBlur stdDeviation="5"/>
</filter>

      灰度

      <filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

      发光

      <filter id="glow">
  <feGaussianBlur stdDeviation="4" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

      动画属性

      animate

      <animate 
  attributeName="属性名"
  from="起始值"
  to="结束值"
  values="值1;值2;值3"
  dur="持续时间"
  begin="开始时间"
  repeatCount="重复次数|indefinite"
  fill="freeze|remove"
/>

      animateTransform

      <animateTransform
  attributeName="transform"
  type="translate|rotate|scale|skewX|skewY"
  from="起始值"
  to="结束值"
  dur="持续时间"
  repeatCount="indefinite"
/>

      浏览器支持

      功能ChromeFirefoxSafariEdge
      基本形状✓✓✓✓
      渐变✓✓✓✓
      滤镜✓✓✓✓
      动画 (SMIL)✓✓✓✓
      CSS 动画✓✓✓✓

      相关资源