一对一直播平台源码，SVG在前端的使用方法
<?xml version="1.0" ?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>雷猴</title><circle cx="50" cy="50" r="50" fill="hotpink"></circle> </svg>
xml 是浏览器能读取的格式，但如果希望 svg 能在浏览器中渲染出来，需要使用 xmlns 声明渲染规则。
所以必须使用 xmlns=“http://www.w3.org/2000/svg”。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>svg demo</title> </head> <body><div><!-- 内嵌到 HTML 中 --><svg width="100%" height="100%" version="1.1"><circle cx="50" cy="50" r="50" fill="hotpink"></circle></svg></div> </body> </html>
可以看到上面的代码中，< svg> 标签并没有使用 xmlns=“http://www.w3.org/2000/svg” 声明命名空间，这是因为 HTML 5 文档使用 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了 < foreignObject> 元素的子元素。
在写本文时，将 SVG 内嵌到 HTML 中 的做法是最常见的，也是比较推荐的方式之一。
做特效时，这种使用方式也是比较轻松的。
<style> .svg_bg_img {width: 100px;height: 100px;background: url('./case1.svg') no-repeat;background-size: 100px 100px; } </style><div class="svg_bg_img"></div>
SVG 也是一种图片格式，所以按理说是能当做背景图来使用的。
一试，果然可以~
<img src="./case1.svg" width="100" height="100">
既然 SVG 可以在 CSS 中当背景图使用，那也可以在 标签里使用咯~
5. 使用 iframe 标签引入（不推荐❌）
<iframesrc="./case1.svg"width="100"height="100" ></iframe>
iframe 可以在网页里再嵌套一个网页，既然 SVG 可以直接在浏览器打开，那使用 < iframe> 引用 SVG 同样也是可以的。
需要注意的是，< iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。
<embedsrc="./case1.svg"width="100"height="100" />
< embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。
< embed> 标签已经被标准采用了。但它不能包含任何子内容，因此如果嵌入失败就没有备用选项了。所以现阶段来看，我不太推荐使用 embed 的方式引入 SVG 。
<objectdata="./case1.svg"type="image/svg+xml"codebase="http://www.adobe.com/svg/viewer/install" ></object>
是通过 data 属性引入资源的。它可以用于嵌入图像，类似 ，也可以用于嵌入独立的 HTML 文档，类似 < iframe> 。
使用 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG。
需要注意的是，在某些现代浏览器中，type 和 codebase 是可以不写的。
type 用来声明当前引入的资源是属于什么类型。
以上就是一对一直播平台源码，SVG在前端的使用方法， 更多内容欢迎关注之后的文章
