首页 前端知识 HTML5(七)——SVG基础入门,web游戏开发

HTML5(七)——SVG基础入门,web游戏开发

2024-09-12 23:09:10 前端知识 前端哥 102 438 我要收藏

二、SVG 形状元素

==========

2.1、svg 标签

SVG 的代码都放到 svg 标签呢,SVG 中的标签都是闭合标签,与html中标签用法一致。svg的属性有:

  • 有width和height,指定了svg的大小。

eg:画一条直线,完整代码如下:

Document

上述 svg 设置的宽高没有带单位,此时默认是像素值,如果需要添加单位时,除了绝对单位,也可以设置相对单位。

  • viewBox 属性

使用语法:

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分,由上述四个参数决定。

使用 viewBox 之后,相当于svg整体大小不变,只能看到 viewBox 设置部分,视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中,也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件,SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用?

2.2.1、embed 嵌入:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18194.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!