SVG في HTML
- الصفحة السابقة مقدمة لـ SVG
- الصفحة التالية مستطيل 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 设置圆内的颜色。我们将填充颜色设置为黄色
- إغلاق علامة <svg> لصورة SVG
ملاحظة: نظرًا لأن SVG مكتوب باستخدام XML، يجب إغلاق جميع العناصر بشكل صحيح!
- الصفحة السابقة مقدمة لـ SVG
- الصفحة التالية مستطيل SVG
