tailwindcss学习笔记之svg

1、SVG基础

1.1、SVG概念

SVG（Scalable Vector Graphics）可缩放矢量图形，是一种基于XML的矢量图形格式，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形，可以无损缩放到任何尺寸而不失真。它是Web标准的一部分，被所有现代浏览器支持。

SVG 与位图图像不同，SVG图像以文本形式存储，可以缩放到任何尺寸而不会失真，因为他们基于数学描述而不是像素。

1.2、SVG核心特点

• 矢量图形，无损缩放
• 基于XML，可用代码编写
• 支持CSS样式和与JavaScript交互
• 文件体积小，加载速度快

1.3、简单示例

1.3.1、示例代码

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="150" cy="100" r="80" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

1.3.2、示例效果

1.3.3、示例解释

1. 从<svg>根元素开始，SVG2 之前使用 version 属性和 baseProfile 属性来供其他类型的验证识别SVG的版本，SVG2 已弃用 version 和 baseProfile 这两个属性。然后设定宽度为300，高度为200。最后xmlns 表示，作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在xmlns属性中绑定）。
2. <rect>标签表示绘制一个宽度100%、高度100%、背景颜色填充红色的矩形。
3. <circle>标签表示表示绘制一个圆，圆心在红色矩形的正中央（向右偏移150px，向下偏移100px），半径是80px，背景颜色是绿色。
4. <text>标签表示绘制”SVG“文字。文字被填充为白色，通过设置居中的锚点把文字定位到期望的位置。

1.4、SVG在web上应用方式

1.4.1、如果哦 HTML 是 XHTML 并且声明类型为 application/xhtml+xml ，可以直接把 SVG 嵌入到 XML 源码中

14.2、SVG 可以直接被嵌入到 HTML 中

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

1.4.3、可以使用 img 标签

<img src="image.svg"></img>

1.4.4、可以通过 object 标签引用 SVG 文件

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

1.4.5、类似的也可以使用 iframe 标签引用 SVG 文件

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