网页中如何使用SVG

将SVG作为图像

1. 将图像包含在 HTML 标记的 <img> 元素内

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

代码语言：javascript复制

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

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

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

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

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

代码语言：javascript复制

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

代码语言：javascript复制

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

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

将SVG作为对象

代码语言：javascript复制

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

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

<object> 与 <embed> 区别： (1) <embed> 使用 src 引用源数据文件，而不是 data 属性； (2) <embed> 不能包含任何子内容，如果嵌入失败就没有备选项。

内联 SVG

代码语言：javascript复制

<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 元素定义样式。

代码语言：javascript复制

circle {
  stroke: blue;
  stroke-width: 2px;
}

如果 svg 中有 <style> 或 <script> 内容，需要去掉 <![CDATA[]]>

svg

0 人点赞