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:rel="external nofollow" href="#circle1" x='50' y='100'></use> <use xlink:rel="external nofollow" 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:rel="external nofollow" href="#circle11" x='50' y='300'></use> <use xlink:rel="external nofollow" 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>