HTML 中的 SVG

2024-07-10 21:08| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 HTML 图形 HTML 图形 HTML 绘图 Graphics Canvas Plotly.js Chart.js Google D3.js 谷歌地图 Maps 简介 Maps 基础 Maps 叠加层 Maps 事件 Maps 控件 Maps 类型 Maps 参考手册 SVG 教程 SVG 简介 SVG 嵌入 HTML SVG 矩形 SVG 圆形 SVG 椭圆 SVG 直线 SVG 多边形 SVG 折线 SVG 路径 SVG 文本 SVG 笔触 SVG 滤镜 SVG 模糊 SVG 阴影 SVG 线性渐变 SVG 径向渐变 SVG 实例 SVG 参考手册 Canvas 教程 Canvas 简介 Canvas 绘制 Canvas 坐标 Canvas 直线 Canvas 形状 Canvas 矩形 Canvas 圆形 Canvas 曲线 Canvas 渐变 Canvas 文本 Canvas 图像 Canvas 时钟时钟简介时钟钟面时钟数字时钟指针时钟启动 HTML 游戏游戏简介游戏画布游戏组件游戏控制器游戏障碍游戏分数游戏图像游戏声音游戏重力游戏弹跳游戏旋转游戏运动 HTML 中的 SVG SVG 简介 SVG 矩形

您可以将 SVG 元素直接嵌入到 HTML 页面中。

将 SVG 直接嵌入 HTML 页面

下面是一个简单的 SVG 图形实例：

抱歉，您的浏览器不支持内联 SVG。

这是 HTML 代码：

我的第一个 SVG

亲自试一试

SVG 代码解释： SVG 图像以元素开头元素的 width 和 height 属性定义 SVG 图像的宽度和高度元素用于绘制圆形 cx 和 cy 属性定义圆心的 x 和 y 坐标。如果未设置 cx 和 cy，则圆心设置为 (0, 0) r 属性定义圆的半径 stroke 和 stroke-width 属性控制形状轮廓的显示方式。我们将圆的轮廓设置为 4 像素的绿色“边框” fill 属性设置圆内的颜色。我们将填充颜色设置为黄色标签关闭 SVG 图像

注意：由于 SVG 是用 XML 写的，因此所有元素都必须正确关闭！

SVG 简介 SVG 矩形 Canvas API

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

HTML 中的 SVG

HTML 中的 SVG

今日新闻

推荐新闻