SVG stroke 属性

stroke 属性系列用于控制 SVG 形状的描边样式，包括颜色、宽度、线型等。

基础 stroke 属性

属性	描述
`stroke`	描边颜色
`stroke-width`	描边宽度
`stroke-opacity`	描边透明度
`stroke-linecap`	线条端点样式
`stroke-linejoin`	线条连接样式
`stroke-dasharray`	虚线模式
`stroke-dashoffset`	虚线起始偏移
`stroke-miterlimit`	斜接限制

stroke（描边颜色）

html

<svg width="400" height="100">
  <!-- 不同颜色 -->
  <line x1="20" y1="30" x2="120" y2="30" stroke="#3b82f6" stroke-width="4"/>
  <line x1="20" y1="50" x2="120" y2="50" stroke="rgb(239, 68, 68)" stroke-width="4"/>
  <line x1="20" y1="70" x2="120" y2="70" stroke="hsl(142, 71%, 45%)" stroke-width="4"/>
  
  <!-- 颜色名称 -->
  <circle cx="180" cy="50" r="30" fill="none" stroke="coral" stroke-width="4"/>
  <circle cx="260" cy="50" r="30" fill="none" stroke="steelblue" stroke-width="4"/>
  <circle cx="340" cy="50" r="30" fill="none" stroke="mediumpurple" stroke-width="4"/>
</svg>

stroke-width（描边宽度）

html

<svg width="400" height="120">
  <line x1="20" y1="20" x2="380" y2="20" stroke="#3b82f6" stroke-width="1"/>
  <line x1="20" y1="40" x2="380" y2="40" stroke="#3b82f6" stroke-width="3"/>
  <line x1="20" y1="65" x2="380" y2="65" stroke="#3b82f6" stroke-width="6"/>
  <line x1="20" y1="95" x2="380" y2="95" stroke="#3b82f6" stroke-width="10"/>
</svg>

stroke-opacity（描边透明度）

html

<svg width="400" height="100">
  <circle cx="60" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="1"/>
  <circle cx="160" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.7"/>
  <circle cx="260" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.4"/>
  <circle cx="360" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.2"/>
</svg>

stroke-linecap（端点样式）

控制线条端点的形状：

html

<svg width="400" height="150">
  <!-- butt：平直端点（默认） -->
  <line x1="50" y1="40" x2="150" y2="40" stroke="#3b82f6" stroke-width="20" stroke-linecap="butt"/>
  <text x="200" y="45" font-size="14" fill="#1f2937">butt（默认）- 平直端点</text>
  
  <!-- round：圆形端点 -->
  <line x1="50" y1="80" x2="150" y2="80" stroke="#22c55e" stroke-width="20" stroke-linecap="round"/>
  <text x="200" y="85" font-size="14" fill="#1f2937">round - 圆形端点</text>
  
  <!-- square：方形端点 -->
  <line x1="50" y1="120" x2="150" y2="120" stroke="#ef4444" stroke-width="20" stroke-linecap="square"/>
  <text x="200" y="125" font-size="14" fill="#1f2937">square - 方形端点</text>
  
  <!-- 参考线 -->
  <line x1="50" y1="20" x2="50" y2="140" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="3"/>
  <line x1="150" y1="20" x2="150" y2="140" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="3"/>
</svg>

stroke-linejoin（连接样式）

控制线条连接处的形状：

html

<svg width="400" height="180">
  <!-- miter：尖角连接（默认） -->
  <polyline points="30,50 80,10 130,50" fill="none" stroke="#3b82f6" stroke-width="15" stroke-linejoin="miter"/>
  <text x="150" y="35" font-size="14" fill="#1f2937">miter - 尖角</text>
  
  <!-- round：圆角连接 -->
  <polyline points="30,100 80,60 130,100" fill="none" stroke="#22c55e" stroke-width="15" stroke-linejoin="round"/>
  <text x="150" y="85" font-size="14" fill="#1f2937">round - 圆角</text>
  
  <!-- bevel：斜角连接 -->
  <polyline points="30,150 80,110 130,150" fill="none" stroke="#ef4444" stroke-width="15" stroke-linejoin="bevel"/>
  <text x="150" y="135" font-size="14" fill="#1f2937">bevel - 斜角</text>
</svg>

stroke-dasharray（虚线模式）

定义虚线的线段和间隔模式：

html

<svg width="400" height="200">
  <!-- 等距虚线 -->
  <line x1="20" y1="20" x2="380" y2="20" stroke="#3b82f6" stroke-width="3" stroke-dasharray="10"/>
  <text x="20" y="40" font-size="12" fill="#6b7280">dasharray="10"</text>
  
  <!-- 长短交替 -->
  <line x1="20" y1="60" x2="380" y2="60" stroke="#22c55e" stroke-width="3" stroke-dasharray="20,5"/>
  <text x="20" y="80" font-size="12" fill="#6b7280">dasharray="20,5"</text>
  
  <!-- 点线 -->
  <line x1="20" y1="100" x2="380" y2="100" stroke="#ef4444" stroke-width="3" stroke-dasharray="2,8"/>
  <text x="20" y="120" font-size="12" fill="#6b7280">dasharray="2,8"</text>
  
  <!-- 复杂模式 -->
  <line x1="20" y1="140" x2="380" y2="140" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="15,5,5,5"/>
  <text x="20" y="160" font-size="12" fill="#6b7280">dasharray="15,5,5,5"</text>
  
  <!-- 点划线 -->
  <line x1="20" y1="180" x2="380" y2="180" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20,5,5,5,5,5"/>
  <text x="20" y="200" font-size="12" fill="#6b7280">dasharray="20,5,5,5,5,5"</text>
</svg>

stroke-dashoffset（虚线偏移）

控制虚线模式的起始位置：

html

<svg width="400" height="150">
  <line x1="20" y1="30" x2="380" y2="30" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="0"/>
  <text x="20" y="50" font-size="12" fill="#6b7280">offset="0"</text>
  
  <line x1="20" y1="70" x2="380" y2="70" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="10"/>
  <text x="20" y="90" font-size="12" fill="#6b7280">offset="10"</text>
  
  <line x1="20" y1="110" x2="380" y2="110" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="25"/>
  <text x="20" y="130" font-size="12" fill="#6b7280">offset="25"</text>
</svg>

线条绘制动画

使用 stroke-dasharray 和 stroke-dashoffset 创建绘制动画：

html

<style>
  .draw-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawLine 2s ease forwards;
  }
  @keyframes drawLine {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="400" height="100">
  <path class="draw-line" d="M20,50 Q100,10 200,50 T380,50" 
        fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>

圆形进度动画

html

<style>
  .progress-ring {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: progress 2s ease forwards;
    transform-origin: center;
    transform: rotate(-90deg);
  }
  @keyframes progress {
    to { stroke-dashoffset: 70; }  /* 75% 进度 */
  }
</style>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>
  <circle class="progress-ring" cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8"/>
</svg>

stroke-miterlimit

控制 miter 连接的最大长度：

html

<svg width="400" height="150">
  <!-- 默认 miterlimit=4 -->
  <polyline points="30,80 80,20 130,80" fill="none" stroke="#3b82f6" stroke-width="15" 
            stroke-linejoin="miter" stroke-miterlimit="4"/>
  <text x="30" y="110" font-size="12" fill="#6b7280">miterlimit="4"</text>
  
  <!-- 较小的 miterlimit -->
  <polyline points="180,80 230,20 280,80" fill="none" stroke="#22c55e" stroke-width="15" 
            stroke-linejoin="miter" stroke-miterlimit="2"/>
  <text x="180" y="110" font-size="12" fill="#6b7280">miterlimit="2"</text>
  
  <!-- 较大的 miterlimit -->
  <polyline points="330,80 380,20 430,80" fill="none" stroke="#ef4444" stroke-width="15" 
            stroke-linejoin="miter" stroke-miterlimit="8"/>
  <text x="330" y="110" font-size="12" fill="#6b7280">miterlimit="8"</text>
</svg>

实际应用示例

加载动画

html

<style>
  .loader {
    animation: rotate 1s linear infinite;
    transform-origin: center;
  }
  @keyframes rotate {
    to { transform: rotate(360deg); }
  }
</style>

<svg width="60" height="60" viewBox="0 0 60 60">
  <circle class="loader" cx="30" cy="30" r="25" fill="none" 
          stroke="#3b82f6" stroke-width="5" 
          stroke-dasharray="100" stroke-dashoffset="25"
          stroke-linecap="round"/>
</svg>

手写签名效果

html

<style>
  .signature {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: sign 3s ease forwards;
  }
  @keyframes sign {
    to { stroke-dashoffset: 0; }
  }
</style>

<svg width="300" height="100">
  <path class="signature" 
        d="M20,60 Q40,20 60,60 T100,60 T140,60 L160,40 L180,70 Q200,90 220,50 L250,50"
        fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>
</svg>

边框样式

html

<svg width="300" height="200">
  <!-- 实线边框 -->
  <rect x="10" y="10" width="130" height="80" rx="8" 
        fill="white" stroke="#3b82f6" stroke-width="2"/>
  
  <!-- 虚线边框 -->
  <rect x="160" y="10" width="130" height="80" rx="8" 
        fill="white" stroke="#22c55e" stroke-width="2" stroke-dasharray="8,4"/>
  
  <!-- 点线边框 -->
  <rect x="10" y="110" width="130" height="80" rx="8" 
        fill="white" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4"/>
  
  <!-- 双色边框效果 -->
  <rect x="160" y="110" width="130" height="80" rx="8" 
        fill="white" stroke="#8b5cf6" stroke-width="4"/>
  <rect x="160" y="110" width="130" height="80" rx="8" 
        fill="none" stroke="white" stroke-width="4" stroke-dasharray="10,10"/>
</svg>

图标描边

html

<svg width="200" height="50">
  <!-- 心形图标 -->
  <path d="M25,15 C25,10 20,5 12.5,5 C5,5 0,12.5 0,20 C0,30 25,45 25,45 C25,45 50,30 50,20 C50,12.5 45,5 37.5,5 C30,5 25,10 25,15 Z" 
        fill="none" stroke="#ef4444" stroke-width="2" stroke-linejoin="round"
        transform="translate(10,0)"/>
  
  <!-- 星形图标 -->
  <polygon points="100,5 105,20 120,20 108,28 113,45 100,35 87,45 92,28 80,20 95,20" 
           fill="none" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"
           transform="translate(30,0)"/>
</svg>

下一步

掌握了描边属性后，接下来让我们学习 SVG 滤镜简介！

SVG stroke 属性 ​

基础 stroke 属性 ​

stroke（描边颜色） ​

stroke-width（描边宽度） ​

stroke-opacity（描边透明度） ​

stroke-linecap（端点样式） ​

stroke-linejoin（连接样式） ​

stroke-dasharray（虚线模式） ​

stroke-dashoffset（虚线偏移） ​

线条绘制动画 ​

圆形进度动画 ​

stroke-miterlimit ​

实际应用示例 ​

加载动画 ​

手写签名效果 ​

边框样式 ​

图标描边 ​

下一步 ​

SVG stroke 属性

基础 stroke 属性

stroke（描边颜色）

stroke-width（描边宽度）

stroke-opacity（描边透明度）

stroke-linecap（端点样式）

stroke-linejoin（连接样式）

stroke-dasharray（虚线模式）

stroke-dashoffset（虚线偏移）

线条绘制动画

圆形进度动画

stroke-miterlimit

实际应用示例

加载动画

手写签名效果

边框样式

图标描边

下一步