HTML SVG use和渐变作为填充

在本文中，我们将介绍如何使用HTML SVG的<use>元素和渐变作为填充来创建各种图形和效果。

阅读更多：HTML 教程

SVG 简介

SVG（可缩放矢量图形）是一种用于描述二维矢量图形的XML基于语言。与像素图形（如JPG或PNG）相比，SVG图像是由矢量描述和数学公式构成的。这意味着SVG图像可以无限缩放而不会失真，保持图像的清晰度和质量。在HTML中，可以使用SVG元素来创建矢量图形和动画效果。

使用`<use>`元素

SVG的<use>元素是用于重复使用SVG图像元素的方法。通过<use>元素，可以在一个SVG文档中多次使用同一个图形，而不需要重复编写相同的代码。使用<use>元素可以提高代码的可读性和维护性。

示例：

<svg>
   <symbol id="star" viewBox="0 0 24 24">
      <path d="M12 2 l4 10 l10 0 l-8 6 l3 10 l-8-6 l-8 6 l3-10 l-8-6 l10 0 z" />
   </symbol>
   <use href="#star" x="20" y="20" fill="#f00" />
   <use href="#star" x="40" y="40" fill="#0f0" />
   <use href="#star" x="60" y="60" fill="#00f" />
</svg>

在上面的示例中，首先定义了一个名为star的<symbol>元素，它包含了一个星形图形的<path>元素。然后，使用三个<use>元素分别引用了star，并通过x和y属性来指定其位置。最后，使用不同的fill属性来为每个星形图形添加不同的填充颜色。这样就可以通过<use>元素的复用，快速创建多个相同的图形。

使用渐变填充

SVG的渐变填充功能是创建丰富图形效果的强大工具之一。通过使用渐变填充，可以在图形中实现颜色的平滑过渡和渐变效果。

SVG提供了两种类型的渐变填充：线性渐变和径向渐变。线性渐变从一点到另一点创建颜色的过渡，而径向渐变则从一个圆心向周围创建颜色的过渡。

示例：

<svg>
   <defs>
      <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
         <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
      </linearGradient>
      <radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
         <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
         <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
      </radialGradient>
   </defs>
   <rect x="10" y="10" width="100" height="50" fill="url(#linear)" />
   <circle cx="180" cy="35" r="25" fill="url(#radial)" />
</svg>

上述示例中定义了一个线性渐变<linearGradient>和一个径向渐变<radialGradient>，分别通过id为它们创建了唯一的标识符。然后，使用fill属性将这两个渐变填充应用到一个矩形和一个圆形上。