svg1.svg是什么 Scalable Vector Graphics （可缩放矢量图形）的缩写二维矢量图形的xml

1.svg是什么

Scalable Vector Graphics （可缩放矢量图形）的缩写
二维矢量图形的xml标记语言用数学描述图形放大缩小不失真
可以通过文本编辑器进行编辑
动态交互

2.svg 结构

首页是由一系列的xml元素构成

svg 相当于跟元素的 HTML

SVG 的元素在语法上的使用与 HTML 标签是类似的每个标签的应用成对

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="background-color: #000; border: 1px dashed #fff;"
     width="300" height="300" class="graph">
     <rect x="20" y="20" width="260" height="260" fill="lime" />
</svg>

这样会绘制带颜色的矩形

在 SVG 内容中嵌套 <svg> 元素可以建立新的svg视口

<svg width="5cm" height="4cm" xmlns="http://www.w3.org/2000/svg">
    <desc>Four separate rectangles</desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

    <!-- 使用 'rect' 元素显示视口轮廓 -->
    <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" />
</svg>

SVG 也可以作为一个片段内嵌在另一个 XML 文档中

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org" xmlns:svg="http://www.w3.org/2000/svg">
    <!-- 这里的父内容 -->
    <svg:svg width="4cm" height="8cm">
        <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
    </svg:svg>
    <!-- 其它父内容 -->
</parent>

SVG 虽然是基于 XML 语言标准来绘制图形，但它以独立文档呈现或嵌套在 HTML 文档中时，它的基本结构和我们熟悉的 HTML 文档是几乎相似的可以像操作 HTML 文档一样来操作 SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
   
</svg>

xmlns 相当于命名空间解决在 XML 文档中的元素冲突问题

如果你的 SVG 文档是以 XML 形式存在，那么需要指定 SVG 命名空间，以确保所有 SVG 元素都被正确识别。常见的方法是在 <svg> 根元素上添加 xmlns
如果你的 SVG 文档嵌套在 HTML 中，那么 HTML 解析器会自动为 <svg> 元素提供命名空间，你无需显式声明

xmlns:xlink

SVG 中的一个命名空间声明，用于指定 XLink 命名空间（XML Linking Language）。XLink 是一种用于在 XML 文档中创建超链接的标准

svg的层级

SVG 元素在源码中出现的越早（排在前面），它在图层中的层级最低

svg 元素

基本形状元素、路径元素、文本元素、容器元素（文本结构元素）、动画元素等

基本元素

circle 圆形
ellipse 路径
line 线
path 路径
polygon
rect 矩形

文本元素

text
tspan
textPath

文档结构元素

a
defs 可重用的图形对象，如渐变、模式、滤镜等
g 元素用于组合多个元素
svg
switch
symbol 定义可重用的图形模板
view 用于定义视口的视图

<svg viewBox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="40" fill="red" /></svg>

动画元素

animate 用于对属性进行动画处理
mpath
set 用于设置属性值的简单动画

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue"> <animate attributeName="r" from="40" to="20" dur="1s" begin="0s" repeatCount="indefinite" /> </circle> </svg>

svg 属性

通用属性

可以应用于所有 SVG

id ：为元素定义唯一标识符
class ：为元素定义一个或多个类名
style ：为元素定义内联 CSS 样式
fill：定义元素的填充颜色
stroke：定义元素的边框颜色
stroke-width：定义元素的边框宽度
transform：定义元素的变换，如平移、旋转、缩放等

特定元素属性

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 95 10 180 80" />
    <line x1="10" y1="10" x2="50" y2="50"  />
    <line x1="10" y1="10" x2="50" y2="50" style="stroke: black; stroke-width: 2;" />
</svg>

d 属性只适用于
x1 、y1 、x2 和 y2 只适用于 <line> 元素：
rx 和 ry 属性用于定义圆角矩形的圆角半径。
cx表示圆的中心点在水平方向上的坐标。
cy表示圆的中心点在垂直方向上的坐标。

    <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="30" class="my-circle" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
   <ellipse cx="10" cy="10" rx="50" ry="50"  />
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="200" height="200" rx="50" ry="50"  />
</svg>

JavaScript 动态生成 SVG

第一种是基于 DOM API 和 SVG API 动态创建 SVG。例如，使用createElementNS方法创建 SVG 元素，然后设置其属性，最后将其添加到文档中。

svg