跳至主要內容

SVG 基础语法

望间2025年2月6日代码SVG大约 9 分钟

SVG（Scalable Vector Graphics）元素由标签和属性组成。标签用于定义图形的形状和样式，而属性则用于定义图形的具体特性，如颜色、大小、位置等。

SVG 文件推荐使用 .svg 作为扩展名，例如 example.svg。

<svg
  width="200"
  height="200"
  viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg">
  <!-- 图形元素 -->
</svg>

主要属性:

  • width: 定义画布的宽度。
  • height: 定义画布的高度。
  • viewBox: 定义视口的坐标系统和比例，其语法为 viewBox = "min-x min-y width height"
    • min-x: 视口的左上角横坐标。
    • min-y: 视口的左上角纵坐标。
    • width: 视口的宽度。
    • height: 视口的高度。
  • xmlns: SVG 命名空间，用于声明 SVG 文档的命名空间。

重要

SVG 的 viewBox 属性非常重要 ，它不仅定义了 SVG 视口的坐标系统和比例，还具有以下作用：

  • 控制 SVG 内容的比例缩放和平移。
  • 允许 SVG 图形在不同的容器大小下保持一致的外观。

注意

如果 viewBox 的宽高比与 SVG 元素的宽高比不同，SVG 内容可能会被拉伸或压缩。

此时，可以结合 preserveAspectRatio 属性来控制如何处理宽高比不匹配的情况。

图形元素

矩形

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="10"
    y="10"
    width="20"
    height="20"
    rx="2"
    ry="2"
    fill="blue"
    stroke="black"
    stroke-width="2"
  />
</svg>
<!-- 矩形 -->
<rect
  x="10"
  y="10"
  width="20"
  height="20"
  rx="2"
  ry="2"
  fill="blue"
  stroke="black"
  stroke-width="2"
/>

主要属性:

  • x: 矩形的左上角横坐标
  • y: 矩形的左上角纵坐标
  • width: 矩形的宽度
  • height: 矩形的高度
  • rx: 矩形圆角的水平半径
  • ry: 矩形圆角的垂直半径
  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度

圆形

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <circle 
    cx="20" 
    cy="20" 
    r="10" 
    fill="blue" 
    stroke="black" 
    stroke-width="2" 
  />
</svg>
<!-- 圆形 -->
<circle 
  cx="20" 
  cy="20" 
  r="10" 
  fill="blue" 
  stroke="black" 
  stroke-width="2" 
/>

主要属性:

  • cx: 圆心的横坐标
  • cy: 圆心的纵坐标
  • r: 圆的半径
  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度

椭圆

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <ellipse
    cx="30"
    cy="20"
    rx="20"
    ry="10"
    fill="blue"
    stroke="black"
    stroke-width="2"
  />
</svg>
<!-- 椭圆 -->
<ellipse
  cx="30"
  cy="20"
  rx="20"
  ry="10"
  fill="blue"
  stroke="black"
  stroke-width="2"
/>

主要属性:

  • cx: 椭圆中心的横坐标
  • cy: 椭圆中心的纵坐标
  • rx: 椭圆的水平半径
  • ry: 椭圆的垂直半径
  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度

多边形

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="5,10 10,5 20,5 15,10 20,20 20,30"
    fill="blue"
    stroke="black"
    stroke-width="2"
  />
</svg>
<!-- 多边形 -->
<polygon
  points="5,10 10,5 20,5 15,10 20,20 20,30"
  fill="blue"
  stroke="black"
  stroke-width="2"
/>

主要属性:

  • points: 多边形顶点的坐标，格式为 "x1,y1 x2,y2 ..."，多个点之间用空格分隔
  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度

直线

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <line 
    x1="10" 
    y1="10" 
    x2="80" 
    y2="30" 
    stroke="black" 
    stroke-width="2" 
  />
</svg>
<!-- 直线 -->
<line 
  x1="10" 
  y1="10" 
  x2="80" 
  y2="30" 
  stroke="black" 
  stroke-width="2" 
/>

主要属性:

  • x1: 直线的起点横坐标
  • y1: 直线的起点纵坐标
  • x2: 直线的终点横坐标
  • y2: 直线的终点纵坐标
  • stroke: 描边颜色
  • stroke-width: 描边宽度

折线

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <polyline
    points="5 10, 10 5, 20 5, 15 10, 20 20, 20 30"
    fill="none"
    stroke="black"
    stroke-width="2"
  />
</svg>
<!-- 折线 -->
<polyline
  points="5 10, 10 5, 20 5, 15 10, 20 20, 20 30"
  fill="none"
  stroke="black"
  stroke-width="2"
/>

主要属性:

  • points: 折线点的坐标，格式为 "x1 y1, x2 y2,..."，多个点之间用空格分隔
  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度

路径

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,10 L 30,30 V 10 H 20"
    fill="none"
    stroke="black"
    stroke-width="2"
  />
</svg>
<!-- 路径 -->
<path
  d="M 10,10 L 30,30 V 10 H 20"
  fill="none"
  stroke="black"
  stroke-width="2"
/>

主要属性:

  • d: 路径的描述，下面是路径命令类型:
    • M: 移动到指定位置
    • L: 绘制直线
    • H: 绘制水平线
    • V: 绘制垂直线
    • C: 绘制三次贝塞尔曲线
    • S: 绘制光滑三次贝塞尔曲线
    • Q: 绘制二次贝塞尔曲线
    • T: 绘制光滑二次贝塞尔曲线
    • A: 绘制圆弧
    • Z: 绘制闭合路径
  • fill: 填充颜色
  • stroke: 描边颜色
  • stroke-width: 描边宽度

文本

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <text
    x="10"
    y="20"
    font-family="Georgia"
    font-size="18"
    fill="black"
    text-anchor="start"
  >
    Text content
  </text>
</svg>
<!-- 文本 -->
<text
  x="10"
  y="20"
  font-family="Georgia"
  font-size="18"
  fill="black"
  text-anchor="start"
>
  Text content
</text>

主要属性:

  • x: 文本的横坐标
  • y: 文本的纵坐标
  • font-family: 文本的字体
  • font-size: 文本的字体大小
  • fill: 文本的颜色
  • text-anchor: 文本的对齐方式
    • start: 左对齐
    • middle: 居中
    • end: 右对齐

描边

stroke

stroke 属性用于定义图形元素的描边（边框）颜色。

stroke 属性接受 CSS 颜色值，包括十六进制颜色值、RGB 颜色值、RGBA 颜色值、HSL 颜色值、HSLA 颜色值、颜色名称等。

如果不想显示描边，可以将 stroke 属性设置为 none。

<svg viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="5" x2="100" y2="5" stroke="#0000ff" />
  <line x1="10" y1="15" x2="100" y2="15" stroke="rgb(0,0,255)" />
  <line x1="10" y1="25" x2="100" y2="25" stroke="rgba(0,0,255,1)" />
  <line x1="10" y1="35" x2="100" y2="35" stroke="hsl(240,100%,50%)" />
  <line x1="10" y1="45" x2="100" y2="45" stroke="hsla(240,100%,50%,1)" />
  <line x1="10" y1="55" x2="100" y2="55" stroke="blue" />
</svg>
<line x1="10" y1="5" x2="100" y2="5" stroke="#0000ff" />
<line x1="10" y1="15" x2="100" y2="15" stroke="rgb(0,0,255)" />
<line x1="10" y1="25" x2="100" y2="25" stroke="rgba(0,0,255,1)" />
<line x1="10" y1="35" x2="100" y2="35" stroke="hsl(240,100%,50%)" />
<line x1="10" y1="45" x2="100" y2="45" stroke="hsla(240,100%,50%,1)" />
<line x1="10" y1="55" x2="100" y2="55" stroke="blue" />

stroke-width

stroke-width 属性用于定义图形元素的描边（边框）宽度。

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="1" />
  <line x1="10" y1="20" x2="100" y2="20" stroke="black" stroke-width="2" />
  <line x1="10" y1="30" x2="100" y2="30" stroke="black" stroke-width="3" />
</svg>
<line x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="1" />
<line x1="10" y1="20" x2="100" y2="20" stroke="black" stroke-width="2" />
<line x1="10" y1="30" x2="100" y2="30" stroke="black" stroke-width="3" />

stroke-linecap

stroke-linecap 属性用于定义图形元素的路径两端的形状。

主要属性:

  • butt: 默认值，路径两端为直角
  • round: 路径两端为圆角
  • square: 路径两端为方形
<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <line
    x1="10"
    y1="10"
    x2="100"
    y2="10"
    stroke="black"
    stroke-width="4"
    stroke-linecap="butt"
  />
  <line
    x1="10"
    y1="20"
    x2="100"
    y2="20"
    stroke="black"
    stroke-width="4"
    stroke-linecap="round"
  />
  <line
    x1="10"
    y1="30"
    x2="100"
    y2="30"
    stroke="black"
    stroke-width="4"
    stroke-linecap="square"
  />

  <path d="M10,10 L100,10 M10,20 L100,20 M10,30 L100,30" stroke="white" />
</svg>
<line
  x1="10"
  y1="10"
  x2="100"
  y2="10"
  stroke="black"
  stroke-width="4"
  stroke-linecap="butt"
/>
<line
  x1="10"
  y1="20"
  x2="100"
  y2="20"
  stroke="black"
  stroke-width="4"
  stroke-linecap="round"
/>
<line
  x1="10"
  y1="30"
  x2="100"
  y2="30"
  stroke="black"
  stroke-width="4"
  stroke-linecap="square"
/>

stroke-dasharray

stroke-dasharray 属性用于定义图形元素的虚线样式。

主要属性:

  • stroke-dasharray="5": 虚线样式为 5px 的点
  • stroke-dasharray="5,10": 虚线样式为 5px 的点，10px 的空格
<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <line
    x1="10"
    y1="10"
    x2="100"
    y2="10"
    stroke="black"
    stroke-width="5"
    stroke-dasharray="5"
  />
  <line
    x1="10"
    y1="20"
    x2="100"
    y2="20"
    stroke="black"
    stroke-width="5"
    stroke-dasharray="5 10"
  />
  <line
    x1="10"
    y1="30"
    x2="100"
    y2="30"
    stroke="black"
    stroke-width="5"
    stroke-dasharray="5 10 15"
  />
</svg>
<line
  x1="10"
  y1="10"
  x2="100"
  y2="10"
  stroke="black"
  stroke-width="5"
  stroke-dasharray="5"
/>
<line
  x1="10"
  y1="20"
  x2="100"
  y2="20"
  stroke="black"
  stroke-width="5"
  stroke-dasharray="5 10"
/>
<line
  x1="10"
  y1="30"
  x2="100"
  y2="30"
  stroke="black"
  stroke-width="5"
  stroke-dasharray="5 10 15"
/>

stroke-opacity

stroke-opacity 属性用于定义图形元素的描边（边框）透明度。

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <line
    x1="10"
    y1="10"
    x2="100"
    y2="10"
    stroke="black"
    stroke-width="5"
    stroke-opacity="0.8"
  />
  <line
    x1="10"
    y1="30"
    x2="100"
    y2="30"
    stroke="black"
    stroke-width="5"
    stroke-opacity="0.5"
  />
</svg>
<line
  x1="10"
  y1="10"
  x2="100"
  y2="10"
  stroke="black"
  stroke-width="5"
  stroke-opacity="0.8"
/>
<line
  x1="10"
  y1="30"
  x2="100"
  y2="30"
  stroke="black"
  stroke-width="5"
  stroke-opacity="0.5"
/>

分组

SVG 允许使用 <g> 将多个形状组成一个组，方便复用。

<svg viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
  <g id="group" fill="black">
    <ellipse cx="50" cy="20" rx="20" ry="10" />
    <circle cx="50" cy="20" r="10" />
  </g>
</svg>
<!-- 分组 -->
<g id="group" fill="black">
  <ellipse cx="50" cy="20" rx="20" ry="10" />
  <circle cx="50" cy="20" r="10" />
</g>

引用

SVG 允许使用 <use> 引用已经定义的图形。

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="5" cy="5" r="4" />

  <use href="#circle" x="10" y="0" fill="blue" />
  <use href="#circle" x="20" y="0" fill="white" stroke="blue" />
</svg>
<circle id="circle" cx="5" cy="5" r="4" />

<use href="#circle" x="10" y="0" fill="blue" />
<use href="#circle" x="20" y="0" fill="white" stroke="blue" />

主要属性:

  • href: 引用定义的图形元素的 ID。
  • x: 引用图形的横坐标偏移。
  • y: 引用图形的纵坐标偏移。

自定义

SVG 允许使用 <defs> 用于自定义形状，在 <defs> 中定义的图形元素不会直接呈现，仅供引用。

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="circle">
      <circle cx="5" cy="5" r="4" />
    </g>
  </defs>

  <use href="#circle" x="0" y="0" />
</svg>
<defs>
  <g id="circle">
    <circle cx="5" cy="5" r="4" />
  </g>
</defs>

<use href="#circle" x="0" y="0" />

平铺

SVG 允许使用 <pattern> 用于平铺元素。

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dots" x="5" y="5" width="50" height="50" patternUnits="userSpaceOnUse">
      <rect fill="#000000" width="40" height="40" />
    </pattern>
  </defs>

  <circle cx="100" cy="100" r="100" fill="url(#dots)" />
</svg>
<defs>
  <pattern id="dots" x="5" y="5" width="50" height="50" patternUnits="userSpaceOnUse">
    <rect fill="#000000" width="40" height="40" />
  </pattern>
</defs>

<circle cx="100" cy="100" r="100" fill="url(#dots)" />

主要属性:

  • x 和 y: 平铺的开始位置
  • width 和 height: 平铺的宽度和高度
  • patternUnits: 平铺的单位:
    • userSpaceOnUse: 相对于 SVG 的视图框
    • objectBoundingBox: 相对于图形元素的边界框

图片

SVG 允许使用 <image> 用于加载图片。

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="https://picsum.photos/200/200" x="0" y="0" width="200" height="200" />
</svg>
<image href="https://picsum.photos/200/200" x="0" y="0" width="200" height="200" />

主要属性:

  • href: 引用定义的图形元素的 ID。
  • x: 引用图形的横坐标偏移。
  • y: 引用图形的纵坐标偏移。
  • width: 图片的宽度。
  • height: 图片的高度。
上次编辑于: 2025/2/11 09:18:37
贡献者: ViewRoom