网页中如何使用SVG

在这里插入图片描述

将SVG作为图像

1. 将图像包含在 HTML 标记的

元素内

当图像是页面的基本组成部分时，推荐这种方式。

<img src="radar.svg" title="雷达图" alt="雷达图">
<div class="txt">将SVG作为图像div>

对于栅格图像，其固有尺寸就是它的像素尺寸。对于 SVG，则：

① 如果文件中的根元素 带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且 带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果 带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。

2. 将图像作为另一个元素的 CSS 样式属性插入

当图像主要用来装饰时，推荐这种方式。

div.bg-radar {
	background-image: url("radar.svg");
	background-size: 100% 100%;
}

<div class="bg-radar">div>
<div class="txt">将SVG作为CSS背景div>

将 SVG 文件作为图像呈现时，无论上述哪种方式，都有一定局限性。图像渲染（SVG 代码被转换为栅格图像用于显示）时与主页面是分离的（主页面样式对 SVG 无效），而且无法在两者之间进行通信。根据浏览器以及用户的安全设置不同，SVG 文件内定义的脚本也可能不会运行，URL #片段也可能被忽略（见上述示例）

将SVG作为对象

<object data="radar.svg" type="image/svg+xml" title="雷达图">
	
  <p>不支持svgp>
  <img src="radar.png" />
object>
<div class="txt">将SVG作为对象div>

其会被缩放以适配元素的宽高，并且不会继承定义在父文档中的任何样式。

与 区别： (1) 使用 src 引用源数据文件，而不是 data 属性； (2) 不能包含任何子内容，如果嵌入失败就没有备选项。 内联 SVG <div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <circle>circle> svg> div> <div class="txt">将SVG作为CSS背景div> 主文档中的样式会被 SVG 继承；也可以在主样式表内为 SVG 元素定义样式。 circle { stroke: blue; stroke-width: 2px; } 如果 svg 中有 </code> 或 <code><script></code> 内容，需要去掉 <code><![CDATA[]]></code></p>