【 SVG 】二、SVG 容器元素_svg容器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46059971/article/details/130571573

一、本文概述

本文所介绍的 svg 中元素，通常不会直接作为直接展示元素，而是配合其他基础元素，以实现指定功能的图层组，本文围绕 svg 常用容器元素，进行实战应用；

二、 SVG 容器元素（常用）

<svg> 作为一个 svg 图层的根元素（必须存在元素）
<defs> 可引用公共图形
<mask> 遮罩层
<pattern> 常定义在 defs 中，常用于填充、描边元素（背景图）
<symbol> 定义一个图形模板对象，它可以用一个 use 元素实例化
<g> group 分组元素，结构化图形组
<a> 超链接标签

三、实战

svg
```
<svg width="140" height="30"></svg>
```

defs
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>defs demo</title>
  <style>
    .border {
       
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <svg class="border" width="120" height="120" viewBox="0 0 120 120">

    <defs>
      <linearGradient id="Gradient-red-green">
        <stop offset="20%" stop-color="#F00" />
        <stop offset="90%" stop-color="#0F0" />
      </linearGradient>
    </defs>

    <rect x="10" y="10" width="100" height="100" fill="url(#Gradient-red-green)" />
  </svg>
</body>

</html>

mask
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mask demo</title>
  <style>
    .border {
        border: 1px solid red; }
  </style>
</head>

<body>
  <svg class="border" width="120" height="120"