阅读 324

前端SVG笔记与绘制玫瑰花实例

这是我参与更文挑战的第10天

一. 初识SVG

SVG能够绘制一些CSS难以做到的复杂图像和动画。而且放大不失真。

二. 基础语法

(1)SVG代码全都放在顶层标签< svg > ...< / svg >之中。 (2)SVG也有宽高属性,< svg width="100%" height="50" > ,如果不指定宽与高,则默认大小 宽300px,高150px 。 (3)如果只展示SVG图像的一部分。则要指定 viewBox 属性。

<svg width="100" height="100" viewBox="50 50 50 50">
<circle i-="mycircle" cx="50" cy="50" r="50"/>
</svg>
复制代码

viewBox属性的值有四个数字,分别是左上角的横坐标和纵坐标,视口的高度和宽度。上面代码中: SVG图像是100像素宽100像素高. viewBox属性指定视口从(50,50)这个点开始。所以,实际看到的是右下角的四分之一圆。注意,视口必须适配所在的空间。上面代码中, 视口的大小是5050 ,由于VG图像的时大小100100,所以视口会放大去适配SVG图像的大小.即放大了四倍。

(4)< circle > 标签代表圆形。

<svg width=" 300" height="180">
<cirqle cx="50" cy="50" r="25" class="yuan" />
</svg>
复制代码

cx、cy、 r属性分别为横坐标,纵坐标和半径。< svg >画布的左上角是原点。也可以给标签设置class类名然后赋予css属性。 不过SVG的CSS属性与网页元素有些不同。

.yuan{
fill:填充色
stroke :描边色
stroke-width :边框宽度
}
复制代码

(5)< line >标签,代表直线。

 <svg>
        <line x1="10" y1="20" x2="100" y2="100" style="stroke: yellow;stroke-width: 5px;"></line>
    </svg>
复制代码

x1 属性和y1属性,表示线段起点的横坐标和纵坐标; x2属性和y2属性,表示线段终点的横坐标和纵坐标; style属性表示线段的样式。

(6)< polyline >标签,代表折线。

<svg>
         <polyline points="1,1 80,81 87,8 54,14 " fill="none" style="stroke: yellow;"></polyline>
  </svg>
复制代码

points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间空格。

(7)< rect >标签代表矩形。

 <svg>
        <rect x='1' y='1' height='50' width='60'></rect>
   </svg>
复制代码

x属性和y属性, 指定了矩形左上角端点的横坐标和纵坐标; width属性和height属性指定了矩形的宽度和高度。

(8)< ellipse > 标签代表椭圆。

 <svg width="600" height="600">
        <ellipse cx='150' cy='50' rx='100' ry='50'></ellipse>
   </svg> 
复制代码

选择语言 cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像索) ; rx属性和ry属性表示横向轴和纵向轴的半径(单位像素)。

(9)< polygon > 标签代表多边形。

 <svg width="600" height="600">
        <polygon points="0,0 50,0  70,70"></polygon>
   </svg> 
复制代码

points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

(10)< path >标签代表路径。

 <svg width="600" height="600">
        <path d="
         M 50,0
         L 2,2
         L 10,20
         L 10,30
         L 0, 90
         Z       
        ">
        </path>
   </svg> 
复制代码

d属性表示绘制顺序,它的值是一个长字符串 ,每个字母表示一个绘制动作 ,后面是坐标。大小写都得。

M:起始点(moveto)
L:画直线到( lineto )
Z:闭合路径
复制代码

更多...

(11)< text >标签,用来绘制文本。

  <svg width="600" height="600">
      <text x='30' y='50' style="font-size: 50px; fill: none;>Hello</text>
   </svg>  
复制代码

x属性和y属性,表示文本区块基线( baseline )起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

(12)< use >标签,可用来复制一个形状

 <svg width="600" height="600">
      <text id="fuzhi" x='30' y='50' style="font-size: 50px; fill: blue;">Hello</text>
      <use href="#fuzhi" x='100' y='100' ></use>
   </svg>  
复制代码

href属性指定所要复制的节点的id,x属性和y属性是左上角的坐标。另外,还可以指定width和height坐标。

(13)< g >标签,把多个形状放一组,用use直接复制一组。

 <svg width="600" height="600">
        <g id="fuzhi">
      <text id="fuzhi" x='30' y='50' style="font-size: 50px; fill: blue;">Hello</text>
      <circle cx='100' cy='100' r='30'></circle>
       </g>

       <use href='#fuzhi' x='200' y='200'></use>
   </svg>  
复制代码

(14)< defs >标签,里面代码不运行显示,除非用被引用。

 <svg width="600" height="600">
        <defs>
        <g id="fuzhi">
      <text id="fuzhi" x='30' y='50' style="font-size: 50px; fill: blue;">Hello</text>
      <circle cx='100' cy='100' r='30'></circle>
       </g>
       </defs>
       
       <use href='#fuzhi' x='200' y='200'></use>
   </svg>  
复制代码

(15)< pattern >标签,自定义一个形状,该形状可以被引用来平铺一个区域。

 <svg width="600" height="600">
        <pattern id="fuzhi" x='0' y='0' width='100' height='100' patternUnits="userSpaceOnUse">
      <circle cx='100' cy='100' r='30'></circle>
       </pattern>

       <rect x='0' y='0' width='100%' height='100%' fill='url(#fuzhi)'></rect>
   </svg>  
复制代码

上面代码中,< pattern>标签将一个圆形定 义为fuzhi。patternUnits="userSpaceOnUse"表示 < pattern>< pattern>的宽度和长度是实际的像索值。然后,指定这个模式去填充下面的矩形。

(16)< image >标签,引用一张图片。

 <svg width="600" height="600">
      <image xlink:href="新建文件夹/img/11.jpg"></image>
   </svg>  
复制代码

上面代码中 xlink:href属性表示图像的来源。

(17)< animate >标签,动画效果,可写多个。

<svg width="600" height="600">
      <circle cx='50' cy='50' r='100'>
          <animate attributeName='cx' from='50' to='100' dur='1s' repeatCount='indefinite'></animate>
          <animate attributeName='cy' from='100' to='150' dur='1s' repeatCount='indefinite'></animate>
          <animate attributeName='fill' from='blue' to='white' dur='1s' repeatCount='indefinite'></animate>
      </circle>
   </svg>  
复制代码

上面代码中,圆形会不断移动,产生动画效果。 attributeName :发生动画效果的属性名。 from :单次动画的初始值。 to :单次动画的结束值。 dur :单次动画的持续时间。 repeatCount :动画的循环模式。

(18)< animate > 标签对CSS的transform属性不起作用, 如果需要变形,就要使用< animateTransform >标签。 详细

<circle cx='50' cy='50' r='100'>
          <animateTransform attributeName="transform" type='rotate' begin='0s' dur='10s'  from='0 50 50 ' to='100 50 50'  repeatCount='indefinite' />
      </circle>
复制代码

上面代码中, 效果为旋转( rotate ) , 这时from和to属性值有三个数字,第1个数字是角度值,第二个值和第三个值是旋转中心的坐标。from=*0 50 50表示开始时,角度为0 ,开始旋转角度为100。

(19)< linearGradient > 定义线性渐变,用于图形元素的填充或描边。 详细

(20)< stop >定义一种颜色及其在渐变上使用的位置。此元素始终是< linearGradient >or< radialGradient >元素的子元素。 用法

<linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
复制代码

属性: 在这里插入图片描述 (20)preserveAspectRatio。有时候, 通常我们使用 viewBox 属性时, 希望图形拉伸占据整个视口。 在其他情况下,为了保持图形的长宽比,必须使用统一的缩放比例. 点击看MDN文档详细用法。

 <svg  viewBox="0 0 1440 320" preserveAspectRatio="none" shape-rendering="auto">
       <path class="wave3" fill="#0099ff" fill-opacity="1" d="M0,320L48,314.7C96,309,192,299,288,282.7C384,267,480,245,576,245.3C672,245,768,267,864,261.3C960,256,1056,224,1152,208C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
     </svg> 
复制代码

三.JS操作SVG

跟普通标签一样使用便可。

四:简单应用实例

效果: 在这里插入图片描述 实现:

  1. 定义svg标签,这个可以自行下载想要的图:
 <svg  viewBox="0 0 1024 1024"  width="300" height="300" >      
        <path  class="hua"  d="M626.915 506.525z m28.242-295.422c-37.145-57.099-75.006-107.854-35.098-161.985-42.876-10.029-77.156 17.088-82.068 53.415-69.89 34.178-48.4 91.277-34.177 145.511 35.712 17.191 72.141 49.322 97.11 87.184 9.311 14.94 18.623 29.982 22.819 45.638 7.163 22.82 2.865 32.848 0.102 58.532 0 5.73 3.581 19.238 4.298 27.117 2.149 5.014 3.581 10.642 4.297 14.224 0.717 10.744-2.148 19.237-5.73 25.684 18.522-15.656 41.34-32.847 47.685-59.248 2.865-11.46 6.447-20.67 7.88-29.266 8.493-31.415 19.237-29.266 24.251-68.458 8.698-54.029-22-94.756-51.369-138.348zM482.53 236.686c0.717-12.178-37.963-97.826 31.313-138.45-67.844-49.323-168.535 11.255-160.553 89.025 27.014-24.15 83.5-4.81 129.24 49.425z m140.804 271.988z m0 0c2.15-5.014 3.582-10.642 2.865-19.954 0.717-5.014-2.148-12.074-4.297-18.521-2.15-6.447-3.582-14.94-3.582-23.536-1.432-7.163-0.716-13.61-0.716-20.67 0.716-12.177 0-22.82-4.298-35.713-17.191-54.234-80.02-114.3-125.761-125.659-73.677-83.602-119.315-72.244-145.716-54.439-23.536-12.177-79.305 0.614-102.738 38.476 84.933-0.716 123.613 190.638 186.545 236.276 54.336 38.578 71.425 24.354 112.05 37.964 35.61 8.596 62.01-2.047 85.648-14.224z m13.098 55.36c2.252-12.28 9.824-21.898 13.815-29.164 11.46-23.944 35.2-55.973 33.768-82.988-9.619 35.201-39.09 70.914-88.923 81.658-19.647 3.99-45.434 6.958-69.89-6.651 21.386 18.828 47.377 22.717 90.253 39.806l11.768-1.433c87.593 201.484-2.865 379.434-2.865 379.434 123.408-177.13 45.229-326.94 8.697-380.15l3.377-0.512z"
            p-id="4170"></path>
    </svg>
复制代码
  1. 定义 svg 标签的基本样式:
 svg{
          border: 1px solid rgba(233, 233, 233, 0.9);
          box-shadow: inset 0 0 15px rgba(233, 233, 233, 0.9);
          cursor: pointer;
          transition: all 1.5s;
    }
复制代码

border: 边框 box-shadow: 阴影 cursor: 鼠标样式 transition:过渡

  1. 定义花(path标签)的基本样式:
.hua{
        fill: transparent;
        stroke: white;
        stroke-width: 5px;
       stroke-dasharray: 1235;
       stroke-dashoffset: 1235;
       fill: transparent;
       transition: all 1.5s;

    }
复制代码

fill: transparent; 颜色透明 stroke: white; 边框白色 stroke-width: 5px; 边框宽5px stroke-dasharray: 1235; 用于创建虚线 stroke-dashoffset: 1235; 偏移 详细用法看这,这个博主写得很直观。 当虚线跟图的边框一样长,再把它向左偏移同样大小,便相当于消失了。

  1. 鼠标经过svg时,取消偏移,线又慢慢回来,便有绘画描边的效果了:
svg:hover{
        box-shadow: inset 0 0 15px rgba(233, 233, 233, 1),
        inset 0 0 20px rgba(233, 233, 233, 1);
    }
    svg:hover .hua{
        stroke-dashoffset: 0;
            fill: red;
    }
复制代码

完整代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(0, 0, 0);
    }
    svg{
          border: 1px solid rgba(233, 233, 233, 0.9);
          box-shadow: inset 0 0 15px rgba(233, 233, 233, 0.9);
          cursor: pointer;
          transition: all 1.5s;
    }
    .hua{
        fill: transparent;
        stroke: white;
        stroke-width: 5px;
       stroke-dasharray: 1235;
       stroke-dashoffset: 1235;
       transition: all 1.5s;

    }
    svg:hover{
        box-shadow: inset 0 0 15px rgba(233, 233, 233, 1),
        inset 0 0 20px rgba(233, 233, 233, 1);

    }
    svg:hover .hua{
        stroke-dashoffset: 0;
            fill: red;

        /* animation: move 2s linear forwards; */
    }
    /* @keyframes move{
        0%{
            stroke-dashoffset: 1230;
            fill: transparent;
        }
        50%{
            stroke-dashoffset: 0;
            fill: transparent;
        }
        100%{
            stroke-dashoffset: 0;
            fill: red;
        }
    } */
</style>
<body>
   
    <svg  viewBox="0 0 1024 1024"  width="300" height="300" >      
        <path  class="hua"  d="M626.915 506.525z m28.242-295.422c-37.145-57.099-75.006-107.854-35.098-161.985-42.876-10.029-77.156 17.088-82.068 53.415-69.89 34.178-48.4 91.277-34.177 145.511 35.712 17.191 72.141 49.322 97.11 87.184 9.311 14.94 18.623 29.982 22.819 45.638 7.163 22.82 2.865 32.848 0.102 58.532 0 5.73 3.581 19.238 4.298 27.117 2.149 5.014 3.581 10.642 4.297 14.224 0.717 10.744-2.148 19.237-5.73 25.684 18.522-15.656 41.34-32.847 47.685-59.248 2.865-11.46 6.447-20.67 7.88-29.266 8.493-31.415 19.237-29.266 24.251-68.458 8.698-54.029-22-94.756-51.369-138.348zM482.53 236.686c0.717-12.178-37.963-97.826 31.313-138.45-67.844-49.323-168.535 11.255-160.553 89.025 27.014-24.15 83.5-4.81 129.24 49.425z m140.804 271.988z m0 0c2.15-5.014 3.582-10.642 2.865-19.954 0.717-5.014-2.148-12.074-4.297-18.521-2.15-6.447-3.582-14.94-3.582-23.536-1.432-7.163-0.716-13.61-0.716-20.67 0.716-12.177 0-22.82-4.298-35.713-17.191-54.234-80.02-114.3-125.761-125.659-73.677-83.602-119.315-72.244-145.716-54.439-23.536-12.177-79.305 0.614-102.738 38.476 84.933-0.716 123.613 190.638 186.545 236.276 54.336 38.578 71.425 24.354 112.05 37.964 35.61 8.596 62.01-2.047 85.648-14.224z m13.098 55.36c2.252-12.28 9.824-21.898 13.815-29.164 11.46-23.944 35.2-55.973 33.768-82.988-9.619 35.201-39.09 70.914-88.923 81.658-19.647 3.99-45.434 6.958-69.89-6.651 21.386 18.828 47.377 22.717 90.253 39.806l11.768-1.433c87.593 201.484-2.865 379.434-2.865 379.434 123.408-177.13 45.229-326.94 8.697-380.15l3.377-0.512z"
            p-id="4170"></path>
    </svg>
</body>

</html>
复制代码

总结:

要运用 SVG 实现复杂的特效还是很困难的,任重道远啊。 加油,陌生人!

Snipaste_2021-05-16_21-38-24.png

文章分类
前端
文章标签