关于前端:SVG-在前端的7种使用方法你还知道哪几种

46次阅读

共计 2168 个字符,预计需要花费 6 分钟才能阅读完成。

本文简介

点赞 + 关注 + 珍藏 = 学会了

技术始终在演变,在网页中应用 SVG 的办法也层出不穷。每个期间都有对应的最优解。

所以我打算把我晓得的 7 种 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 文档应用 <!DOCTYPE html> 标记,它容许跳过 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 中当背景图应用,那也能够在 <img> 标签里应用咯~

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>

<object> 是通过 data 属性引入资源的。它能够用于嵌入图像,相似 <img>,也能够用于嵌入独立的 HTML 文档,相似 <iframe>

应用 <object> 嵌入 SVG 能够让那些不能间接显示 SVG 但又有 SVG 插件的老旧浏览器展现 SVG

须要留神的是,在某些古代浏览器中,typecodebase 是能够不写的。

type 用来申明以后引入的资源是属于什么类型。

总结

在写本时,我举荐应用 内嵌到 HTML 的形式来做日常开发。

其余形式依照你理论需要去应用即可。

最初的 embedobject 这两种形式能够当做备用计划去应用。

代码仓库

⭐雷猴 SVG

举荐浏览

👍《Canvas 从入门到劝敌人放弃(图解版)》

👍《Fabric.js 从入门到收缩》

👍《『Three.js』腾飞!》

👍《console.log 也能插图!!!》

👍《纯 css 实现 117 个 Loading 成果》

👍《视差特效的原理和实现办法》

👍《这 18 个网站能让你的页面背景炫酷起来》
代码仓库

正文完
 0