svg入门

svg

                  声明：内容摘取了许多篇文章，其中也有ChatGPT内容，b站内容，仅作为学习观摩

1. HTML文件中：

<svg width=” ” height=” ”> … </svg>

1. 可以在HTML中嵌入svg代码

• body标签，表示网页的主体部分，包含网页上的所有可见内容
• svg元素

<svg…>：svg是XML（可扩展标记语言）的一个子集，用于描述二维矢量图形

version=1.1 指定svg版本为1.1

xmlns = SVG namespace : 定义svg命名空间

style=……  使用内联CSS设置svg元素的尺寸，这个svg图形将具有300像素的高

度和500像素的宽度

• svg内容

<circle……/>  ：在svg中绘制一个图形

cx定义圆的圆心x坐标为100像素，cy定义y坐标为50像素，r定义圆的半径为

40像素，stroke定义圆的描边颜色为黑色，stroke-width定义圆的描边宽度为2像素，fill定义圆的填充颜色为红色

1. 单独建一个svg文件，并在HTML中引用

建一个example1.svg文件，内容如下：

 然后在HTML通过标签引入：

当然也可以用“<a>”标签做一个链接，连到SVG文件：

• svg

baseProfile：指定svg基础配置文件为full，包含了svg1.1规范中的所有功能，但需要注意的是，baseProfile属性在svg1.1中是非标准的，并且在svg2中已被移除

• 矩形元素（<rect>）

width设置矩形的宽度为其父元素（即svg元素）宽度的100%