【H5】 svg的 defs用法 渐变

defs

defs元素用于预定义一个元素使其能够在SVG图像中重复使用。在元素中定义的图形不会直接显示在SVG图像上。要显 示它们需要使用元素来引入它们 symbol 元素用于定义可重复使用的符号。嵌入在元素中的图形是不会被直接显示 的，除非你使用元素来引用它。一个元素可以有preserveAspectRatio和viewBox属性

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
    <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
      <!-- defs包裹 -->
      <defs>
        <g>
          <!--(cx,cy)圆心点位置  -->
          <circle id='circle1' cx="50" cy="50" r="50" fill="pink"> </circle>
          <circle id='circle2' cx="50" cy="50" r="50" fill="pink"> </circle>  
        </g>
      </defs>
      <!-- 将defs内写好的样式通过id显示到页面上 -->
      <use xlink:href="#circle1" x='50' y='100'></use>
      <use xlink:href="#circle2" x='150' y='100'></use>

      <!-- symbol包裹 -->
      <symbol>
          <circle id='circle11' cx="50" cy="50" r="50" fill="#000"></circle>
          <circle id='circle22' cx="50" cy="50" r="50" fill="#000"></circle> 
      </symbol>
      <!-- 将symbol内写好的样式通过id显示到页面上 -->
      <use xlink:href="#circle11" x='50' y='300'></use>
      <use xlink:href="#circle22" x='150' y='300'></use>

    </svg>
</div>

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid #000;margin: 50px auto 0;">
   <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
      <defs>
        <!-- linearGradient线性渐变 x1 x2 x3也可以设置渐变位置样式可写可不写 -->
        <linearGradient id="grad1" x1="10%" x2="80%" x3="100%">
          <!-- offset渐变位置百分比 -->
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
          <stop offset="50%" style="stop-color:rgb(36, 240, 9);stop-opacity:1"></stop>
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
        </linearGradient>
      </defs>
      <!--  (cx,cy)位置 rx长半径 ry短半径 通过id给椭圆设置写好的渐变色 -->
      <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
   </svg>
</div>