Pengian Docs

Appearance

Return to top
On this page

SVG 应用

SVG 如何应用到 HTML 中

  • 直接在 HTML 中使用 SVG 代码
  • 使用<img>标签引入 SVG 文件
  • 使用<object>标签引入 SVG 文件
  • 使用<iframe>标签引入 SVG 文件
  • 使用<embed>标签引入 SVG 文件

示例：

<!DOCTYPE html>
<html>
<body>

<h1>SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<img src="circle.svg" width="100" height="100">

<object data="circle.svg" width="100" height="100"></object>

<iframe src="circle.svg" width="100" height="100"></iframe>

<embed src="circle.svg" width="100" height="100"></embed>

</body>
</html>

SVG 如何应用到 CSS 中

  • 使用background-image属性引入 SVG 文件
  • 使用background属性引入 SVG 文件

示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-image: url("circle.svg");
      }
    </style>
  </head>
  <body>
    <h1>SVG</h1>

    <div></div>
  </body>
</html>

SVG clip-path

clip-path 是CSS Marking的一部分，可以通过不同形状函数的指定路径来剪切元素(svg元素或HTML元素)，搭配svg可以实现更灵活的剪切。

剪切这个概念是相对的，实际上是通过指定路径来显示元素的一部分，剩余部分不显示。

示例：

文字裁剪

clip-path 属性可以通过 SVG 路径来剪切文字。

示例：

SVG mask

mask 属性可以通过 SVG 路径来遮罩元素。

示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: yellow;
        mask: url(#myMask);
      }
    </style>
  </head>
  <body>
    <h1>SVG</h1>

    <div></div>

    <svg width="0" height="0">
      <mask id="myMask">
        <circle cx="50" cy="50" r="40" fill="white" />
      </mask>
    </svg>
  </body>
</html>

SVG filter

filter 属性可以通过 SVG 路径来过滤元素。

示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: yellow;
        filter: url(#myFilter);
      }
    </style>
  </head>
  <body>
    <h1>SVG</h1>

    <div></div>

    <svg width="0" height="0">
      <filter id="myFilter">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      </filter>
    </svg>
  </body>
</html>

参考