如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

站长手记作者： 2024-08-28 12:50:01

设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！ SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。

可缩放矢量图形

SVG 路径

<!-- A right-angled triangle -->
<path d="M10 10 L75 10 L75 75 Z" />

SVG 路径与 CSS

<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

<svg width="300px" height="175px" version="1.1">

   <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

</svg>
svg {
 width: 300px;
 display: block;
 position: absolute;
 .path {
   stroke-dasharray: 320;
   stroke-dashoffset: 0;
   animation: dash 1s linear;
 }
 @keyframes dash {
   from {
     stroke-dashoffset: 320;
   }
   to {
     stroke-dashoffset: 0;
   }
 }
}

<svg width="300px" height="175px" version="1.1">
 <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
 <path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
 <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
</svg>

svg {
 width: 300px;
 display: block;
 position: absolute;
}

svg .line1 {
 stroke-dasharray: 340;
 stroke-dashoffset: 40;
 animation: dash 1.5s linear alternate infinite;
}

svg .line2 {
 stroke-dasharray: 320;
 stroke-dashoffset: 320;
 animation: dash2 1.5s linear alternate infinite;
}

@keyframes dash {
 from {
   stroke-dashoffset: 360;
 }
 to {
   stroke-dashoffset: 40;
 }
}

@keyframes dash2 {
 from {
   stroke-dashoffset: 280;
 }
 to {
   stroke-dashoffset: -40;
 }
}

沿 SVG 路径的动画对象

<svg width="300px" height="175px" version="1.1">
   <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>
<div class="ball"></div>

svg {
 width: 300px;
 display: block;
 position: absolute;
}

.ball {
 width: 10px;
 height: 10px;
 background-color: red;
 border-radius: 50%;
 offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
 offset-distance: 0%;
 animation: red-ball 2s linear alternate infinite;
}

@keyframes red-ball {
 from {
   offset-distance: 0%;
 }
 to {
   offset-distance: 100%;
 }
}