一对一直播平台源码，SVG在前端的使用方法

一对一直播平台源码，SVG在前端的使用方法

1. 在浏览器直接打开

<?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”。

2. 内嵌到 HTML 中（推荐⭐⭐⭐）

复制代码
<!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 中 的做法是最常见的，也是比较推荐的方式之一。

做特效时，这种使用方式也是比较轻松的。

3. CSS 背景图（推荐⭐）

复制代码
<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 也是一种图片格式，所以按理说是能当做背景图来使用的。

一试，果然可以~

4. 使用 img 标签引入（推荐⭐）

<img src="./case1.svg" width="100" height="100">

 

既然 SVG 可以在 CSS 中当背景图使用，那也可以在  标签里使用咯~

5. 使用 iframe 标签引入（不推荐❌）

<iframe
  src="./case1.svg"
  width="100"
  height="100"
></iframe>

 

iframe 可以在网页里再嵌套一个网页，既然 SVG 可以直接在浏览器打开，那使用 < iframe> 引用 SVG 同样也是可以的。

需要注意的是，< iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。

6. 使用 embed 标签引入（不推荐❌）

<embed
  src="./case1.svg"
  width="100"
  height="100"
/>

 

< embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。

< embed> 标签已经被标准采用了。但它不能包含任何子内容，因此如果嵌入失败就没有备用选项了。所以现阶段来看，我不太推荐使用 embed 的方式引入 SVG 。

7. 使用 object 标签引入（不推荐❌）

<object
  data="./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在前端的使用方法， 更多内容欢迎关注之后的文章

posted @   云豹科技-苏凌霄  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  一对一视频直播源码，scss的推展写法详解
·  一对一直播源码，实现一个简单的登录界面
·  什么是svg？说说svg有什么运用场景？
·  SVG前端画图
·  [html] html中如何使用svg？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天：
2023-01-11 搭建直播平台，Android开发之禁止下拉通知栏的方法
2023-01-11 直播平台软件开发，Android 10 拍照和相册选择
2023-01-11 直播软件app开发，删除主页搜索框
2022-01-11 短视频系统源码，各个视频正常排序排列
2022-01-11 直播源码网站，各个分类之间用横线或者竖线隔开
2022-01-11 app直播源码，列表越界后自动弹回原样的效果
点击右上角即可分享
微信分享提示
AI IDE Trae