DayDreamerBlog

Appearance

SVG 意为可缩放矢量图形（Scalable Vector Graphics，用于描述二维图形的 XML 标记语言，以文本形式存储，并且可以缩放到任意大小而不会失真。

编写好的 SVG 代码保存为以 .svg 扩展名结尾的文件，如 example.svg，也可以直接嵌入HTML。

SVG 参考手册 | 菜鸟教程

特点 ​

  • 矢量图形：使用基于路径的矢量图形，图形可以无限放大而不失真。
  • 可伸缩性：在不同的分辨率下保持清晰，适合用于响应式设计。
  • 互动性：与 JavaScript 结合，实现动画和交互效果。
  • 集成性：SVG 可以直接嵌入 HTML5 中。
  • 兼容性：大多数现代浏览器都支持 SVG。

应用场景 ​

  • 网页图标：可伸缩性使其非常适合用来制作网页图标。
  • 数据可视化：图表和图形的创建。如条形图、饼图等。
  • 动画：与 CSS 和 JavaScript 结合，创建复杂的动画效果。

语法 ​

html
<svg
  width="200"
  height="200"
  xmlns="http://www.w3.org/2000/svg">   <!-- 指定SVG命名空间 -->
  <!-- SVG图形内容使用标签来描述不同的图形-->
  <!--例如 <circle> 表示圆形，<rect> 表示矩形等。-->
</svg>

rect等一般图形 ​

html
<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Path ​

SVG 中的 <path> 元素用于创建路径，它是 SVG 中最强大和最灵活的基本形状之一。

html
<path
  d="path-data"            <!-- 定义路径的路径数据 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->
/>

d 属性定义了路径的路径数据，即路径命令序列。

路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。

常用的路径命令包括：

  • M（移动到）
  • L（直线到）
  • H（水平线到）
  • V（垂直线到）
  • C（三次贝塞尔曲线）
  • S（光滑曲线）
  • Q（二次贝塞尔曲线）
  • T（光滑二次贝塞尔曲线）、
  • A（圆弧）
  • Z（闭合路径）等。

来个三角形

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2" />
</svg>

文字 ​

html
<text
  x="x-coordinate"          <!-- 文本左上角的 x 坐标 -->
  y="y-coordinate"          <!-- 文本左上角的 y 坐标 -->
  font-family="font"        <!-- 字体名称 -->
  font-size="size"          <!-- 字体大小 -->
  fill="fill-color"         <!-- 文本颜色 -->
  text-anchor="anchor"      <!-- 文本锚点 -->
>
  Text content              <!-- 文本内容 -->
</text>

路径文字

html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

作为链接

html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3schools.com/svg/" 
target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>

渐变 ​

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义线性渐变 -->
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </linearGradient>
  
  <!-- 应用线性渐变的矩形 -->
  <rect x="50" y="50" width="100" height="80" fill="url(#gradient)" />
</svg>


<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义径向渐变 -->
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </radialGradient>
  
  <!-- 应用径向渐变的圆形 -->
  <circle cx="100" cy="100" r="80" fill="url(#gradient)" />
</svg>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
<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>