浅谈一下SVG的学习与使用( >_< )

1.什么是SVG？

SVG，可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维图形的 XML 标记语言。与位图图像不同，SVG 图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

2.使用SVG的优势在哪？

• 可缩放性：SVG 图像可以无损地缩放到任意大小而不失真。这是因为 SVG 是基于矢量描述的，而不是像素图像，因此在不同分辨率和尺寸的屏幕上都能保持清晰。

• 文本性质：SVG 文件是基于XML的文本文件，易于编辑和维护。你可以直接编辑 SVG 文件来调整图形，也可以使用文本编辑器或代码编辑器来创建和修改 SVG 图像。

• 交互性：SVG 允许添加交互式元素，如链接、动画和事件处理器。这使得 SVG 图像可以与用户进行交互，从而创建更丰富的用户体验。

• 动画支持：SVG 支持使用 CSS 和 JavaScript 创建动画，使图形更生动。你可以通过 CSS 动画或 JavaScript 脚本来实现 SVG 图形的动态效果，如过渡、旋转、缩放等。

• 可嵌入性：SVG 图像可以直接嵌入到 HTML 文档中，也可以作为外部文件链接到 HTML 文档中。这使得 SVG 图像可以与其他Web技术无缝集成，如 CSS、JavaScript 等。

3.SVG的基本语法？

 　　   <svg  width="100px" height="100px">

        　　<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>

    　　</svg>

• • SVG文档以 <svg> 标签开始，以 </svg> 标签结束。

  • SVG元素使用标签来描述不同的图形，例如 <circle> 表示圆形，<rect> 表示矩形等。

  • SVG元素可以包含属性，用于指定图形的各种特性，如位置、大小、颜色等。

4.SVG一些基本的图形绘制

SVG 提供了一系列的图形元素来绘制各种形状的图形，如矩形、圆形、直线、多边形等。

• • <rect>：绘制矩形：使用 <rect> 元素绘制矩形，可以指定矩形的位置、大小、圆角等属性。<rect x="50" y="50" width="100" height="50" rx="10" ry="10" fill="blue" />

  • <circle>：绘制圆形：使用 <circle> 元素绘制圆形，可以指定圆心坐标和半径。<circle cx="100" cy="100" r="50" fill="red" />

  • <ellipse>：绘制椭圆：使用 <ellipse> 元素绘制椭圆，可以指定椭圆的中心坐标和长短轴的半径。<ellipse cx="100" cy="100" rx="80" ry="50" fill="green" />

  • <line>：绘制直线：使用 <line> 元素绘制直线，需要指定起点和终点坐标。<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />

  • <polyline>：绘制折线：使用 <polyline> 元素绘制折线，需要指定多个点的坐标。<polyline points="100,50 150,150 50,150" fill="none" stroke="blue" stroke-width="2" />

  • <polygon>：绘制多边形：使用 <polygon> 元素绘制多边形，需要指定多个顶点的坐标。<polygon points="100,50 150,150 50,150" fill="orange" />

  • <path>：绘制路径：使用 <path> 元素绘制路径，可以通过指定一系列的路径命令来绘制各种形状。<path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="black" stroke-width="2" />

5.其它的一些属性介绍：https://www.runoob.com/svg/svg-example.html

渐变和填充：

• • 使用 <linearGradient> 或 <radialGradient> 定义渐变。

  • 使用 fill 和 stroke 属性指定填充和描边样式。

文本和字体：

• • 使用 <text> 元素插入文本。

  • 使用 font-family、font-size 等属性控制文本样式。

动画和交互：

• • 使用CSS或JavaScript创建动画效果。

  • 添加事件处理器实现交互功能，如鼠标点击、悬停等。

SVG 元素属性：

SVG元素可以具有各种属性，用于指定图形的位置、大小、颜色等特性。

• • • cx 和 cy 属性定义了圆心的x和y坐标。

    • r 属性定义了圆的半径。

    • fill 属性定义了填充颜色。

    • stroke 属性定义了描边颜色。

    • stroke-width 属性定义了描边宽度。

 

嵌套和分组：

SVG 元素可以嵌套和分组，以便更好地组织和管理图形元素。

• • • <g> 元素用于创建一个分组。

    • id 属性用于为分组指定一个唯一的标识符。