master

Branches (1)

Manage

Manage

master

thunder-monkey-svg
/
tutorial
/
01起步
/
1-02使用svg.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>1-02 使用svg</title>
  <style>
    .svg_bg_img {
      width: 100px;
      height: 100px;
      background: url('./case1.svg') no-repeat;
      background-size: 100px 100px;
    }
  </style>
</head>
<body>
  <!--
    使用 svg 的方法
    1. 内嵌到 HTML 中（直接在 HTML 中绘制）
    2. 作为 css 背景使用
    3. 在 HTML 的 img 标签中引用
    4. 通过浏览器直接打开 SVG（也就是说可以在 iframe 中使用）
    5. embed 标签中使用
    6. object 标签中使用
    7. 直接在浏览器打开 SVG 文件
  -->

  <!--
    1. html
  -->
  <h1>1. html</h1>
  <div style="width: 100px; height: 100px;">
    <svg width="100%" height="100%">
      <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
    </svg>
  </div>

  <!--
    2. css
  -->
  <h1>2. css</h1>
  <div class="svg_bg_img"></div>

  <!--
    3. img
    把图像当图片的形式引入
  -->
  <h1>3. img</h1>
  <img src="./case1.svg" width="100" height="100">


  <!--
    4. iframe
  -->
  <h1>4. iframe</h1>
  <iframe
    src="./case1.svg"
    width="100"
    height="100"
  ></iframe>


  <!--
    5. embed
    embed 标签可用来插入各种媒体

    其实 type 和 pluginspage 都可以不写
    但如果要写的话，可以写成这样
    type="image/svg+xml"
    pluginspage="http://www.adobe.com/svg/viewer/install"

    因为 embed 是可以从外部引入一些资源，所以需要默认安装一些解析引擎。本例就安装一个svg解析引擎
    pluginspage 指向要下载的插件url

    不推荐使用 embed
  -->
  <h1>5. embed</h1>
  <embed
    src="./case1.svg"
    width="100"
    height="100"
  />


  <!--
    6. object
    对象标签

    能使用 embed 资源标签引入 svg 的话，换言之也可以把 svg 当成对象来使用
  -->
  <h1>6. object</h1>
  <object
    data="./case1.svg"
    type="image/svg+xml"
    codebase="http://www.adobe.com/svg/viewer/install"
  ></object>


  <!--
    7. 直接在浏览器打开 SVG 文件
  -->
</body>
</html>