SVG系列——1，入门级操作

本质

代码作画。

和Canvas一样，最终都是一张图片。右键有【复制图片】选项。

找参考资料：https://developer.mozilla.org/zh-CN/docs/Web/SVG

入门案例

结构：

<div id="app"></div>

表现：

#app {
    
    
	width: 600px;
	height: 600px;
	outline: solid pink 2px;
	margin: 4rem auto 0;
}

效果：空空如也正方形。

在div中加入：

<svg xmlns="http://www.w3.org/2000/svg"
	 width="600" height="600"
>
	<rect fill="red" height="50%" width="50%" x="0" y="0"/>
	<rect fill="pink" height="50%" width="50%" x="50%" y="0"/>
	<rect fill="blue" height="50%" width="50%" x="0" y="50%"/>
	<rect fill="yellow" height="50%" width="50%" x="50%" y="50%"/>
</svg>

解释一下：
xmlns：svg代码提示。固定的。
width，height：svg总大小。这里是600x600。

<rect>：画矩形。
fill：绘制方式为填充，值为颜色。
height，width：绘制矩形的宽高。
x，y：绘制的起点，左上角坐标。

效果：

简单分析

svg的框架：

<svg xmlns="http://www.w3.org/2000/svg"
	 width="600" height="600"
>
	<!--内容-->
</svg>

画一个填充矩形：

<rect 
	fill="red"  
	x="0" y="0" 
	height="50%" width="50%"
/>

外部文件引入

<img>

<img src="./hello.svg" alt=""/>

IDEA可以直接预览：