SVG Dalam HTML
- Hal sebelumnya Ringkasan SVG
- Hal berikutnya Persegi SVG
您可以将 SVG 元素直接嵌入到 HTML 页面中。
将 SVG 直接嵌入 HTML 页面
下面是一个简单的 SVG 图形实例：
这是 HTML 代码：
!DOCTYPE html <html> <body> <h1>我的第一个 SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
SVG 代码解释：
- SVG 图像以 <svg> 元素开头
- <svg> 元素的 width 和 height 属性定义 SVG 图像的宽度和高度
- <circle> 元素用于绘制圆形
- cx 和 cy 属性定义圆心的 x 和 y 坐标。如果未设置 cx 和 cy，则圆心设置为 (0, 0)
- r 属性定义圆的半径
- stroke 和 stroke-width 属性控制形状轮廓的显示方式。我们将圆的轮廓设置为 4 像素的绿色“边框”
- fill 属性设置圆内的颜色。我们将填充颜色设置为黄色
- Tutup tag <svg> imej SVG
Pertimbangan: Kerana SVG ditulis dengan XML, semua elemen mesti ditutup dengan betul!
- Hal sebelumnya Ringkasan SVG
- Hal berikutnya Persegi SVG
