SVG Scalable Vector Graphics
SVG 使用 XML 格式定义图像
内嵌使用
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
外部引用
<embed src="circle.svg" type="image/svg+xml" />
示例
1、矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rectx="50"
y="20"
width="300"
height="100"
style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0);"
/>
</svg>
x 矩形到浏览器窗口左侧的距离
y 矩形到浏览器窗口顶端的距离
width 宽度
height 高度
fill 填充颜色
stroke-width 边框宽度
stroke 边框颜色
2、10 号字
<svg xmlns="http://www.w3.org/2000/svg"; version="1.1">
<text fill="#000000" font-size="10" font-family="Verdana" x="0" y="10">
你好
</text>
</svg>
资源
SVG 教程 https://www.runoob.com/svg/svg-tutorial.html
SVG 在线编辑 https://c.runoob.com/more/svgeditor/
</div>