Svg 基础使用

发布时间 2026-01-16 08:44:28

阅读量加载中...

基本知识

SVG 是一种基于 XML 的矢量图形标准，由 W3C 组织制定，支持无损缩放、交互性和动态效果。

核心特点

矢量特性： 无论放大还是缩小均保持清晰，文件体积小，适合网络传输，尤其适用于高分辨率设备。

可编辑性： 直接通过文本编辑器修改 SVG 代码，支持颜色、形状、动画参数的实时调整。

交互性： 支持 JS 和 Css 控制，可实现点击、悬停等动态响应。

兼容性： 主流浏览器均原生支持 SVG，移动端适配性强。

常见 CSS 属性

属性	描述	示例
fill	填充颜色(支持颜色值、渐变、图案)不需要改为 none	fill:#fff;
stroke	定义描边颜色(支持颜色值、渐变、图案)	stroke:#000;
stroke-width	定义描边宽度(支持像素、百分比、px、em 等单位)	stroke-width:2px;
stroke-dasharray	虚线模式(实现长度+虚线长度)	stroke-dasharray:5,10;
stroke-dashoffset	调整虚线和间隔的起始位置	stroke-dashoffset:10px;

示例

描边绘制动画

此演示仅在桌面端浏览器中可用

     css
    
  
svg {
  width: 60px;
  height: 60px;
  stroke: black;
  stroke-width: 10px;
  fill: none;
}

svg:hover {
  animation: draw 0.3s linear forwards;
}

@keyframes draw {
  0% {
    stroke-dasharray: 0 300;
  }
  100% {
    stroke-dasharray: 300 0;
  }
}

心形描边绘制

此演示仅在桌面端浏览器中可用

     css
    
  
svg {
  width: 100px;
  height: 100px;
  stroke: red;
  stroke-width: 5px;
  fill: none;
  stroke-dasharray: 2784;
}

svg:hover {
  animation: draw 2s linear forwards;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 2784;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

#Svg