php嵌套svg技巧_SVG 在前端的7种运用方法你还知道哪几种

文章目录 [+]

技能一贯在演化，在网页中利用 SVG 的方法也层出不穷。
每个期间都有对应的最优解。

以是我打算把我知道的 7种 SVG 的利用方法列举出来，防患未然~

php嵌套svg技巧_SVG 在前端的7种运用方法你还知道哪几种

如果你还知道其他方法，可以在评论区补充~

（图片来自网络侵删）

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>  <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"/>

7. 利用 object 标签引入（不推举❌）