stroke 描边属性

详细介绍SVG的stroke描边属性，包括颜色设置、透明度控制、描边位置等。通过实例掌握描边的各种用法。 stroke属性定义图形轮廓的颜色，是SVG中最常用的样式属性之一。

基本语法

<element stroke="颜色值"/>

颜色格式

十六进制

<rect x="20" y="20" width="70" height="60" fill="none" stroke="#e74c3c" stroke-width="3"/>
<rect x="115" y="20" width="70" height="60" fill="none" stroke="#3498db" stroke-width="3"/>
<rect x="210" y="20" width="70" height="60" fill="none" stroke="#2ecc71" stroke-width="3"/>

RGB/RGBA

<rect x="20" y="20" width="70" height="60" fill="none" stroke="rgb(231, 76, 60)" stroke-width="3"/>
<rect x="115" y="20" width="70" height="60" fill="none" stroke="rgb(52, 152, 219)" stroke-width="3"/>
<rect x="210" y="20" width="70" height="60" fill="none" stroke="rgba(46, 204, 113, 0.5)" stroke-width="3"/>

颜色名称

<rect x="20" y="20" width="70" height="60" fill="none" stroke="red" stroke-width="3"/>
<rect x="115" y="20" width="70" height="60" fill="none" stroke="blue" stroke-width="3"/>
<rect x="210" y="20" width="70" height="60" fill="none" stroke="green" stroke-width="3"/>

特殊值

none（无描边）

<circle cx="100" cy="50" r="40" fill="#3498db" stroke="none"/>

currentColor（当前颜色）

<svg style="color: #e74c3c;">
  <circle cx="100" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="3"/>
</svg>

stroke-opacity 描边透明度

单独控制描边的透明度，不影响填充。

<rect x="20" y="20" width="70" height="60" fill="#ecf0f1" stroke="#3498db" stroke-width="5" stroke-opacity="1"/>
<rect x="115" y="20" width="70" height="60" fill="#ecf0f1" stroke="#3498db" stroke-width="5" stroke-opacity="0.5"/>
<rect x="210" y="20" width="70" height="60" fill="#ecf0f1" stroke="#3498db" stroke-width="5" stroke-opacity="0.2"/>

渐变描边

<defs>
  <linearGradient id="strokeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#3498db"/>
    <stop offset="100%" style="stop-color:#e74c3c"/>
  </linearGradient>
</defs>
<rect x="20" y="20" width="160" height="60" fill="none" stroke="url(#strokeGrad)" stroke-width="5"/>

描边位置

描边位于路径的中心线上，一半在图形内部，一半在外部。

<rect x="50" y="50" width="100" height="50" fill="#3498db" stroke="#e74c3c" stroke-width="10"/>

实际应用

图标轮廓

<circle cx="60" cy="50" r="35" fill="none" stroke="#3498db" stroke-width="3"/>
<path d="M 45,50 L 55,60 L 75,40" fill="none" stroke="#2ecc71" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

文字描边

<text x="100" y="60" text-anchor="middle" font-size="40" font-weight="bold" fill="#3498db" stroke="#2980b9" stroke-width="2">SVG</text>

镂空效果

<text x="100" y="65" text-anchor="middle" font-size="50" font-weight="bold" fill="none" stroke="#3498db" stroke-width="2">TEXT</text>

描边与填充对比

<text x="50" y="60" text-anchor="middle" font-size="30" font-weight="bold" fill="#3498db">Fill</text>
<text x="150" y="60" text-anchor="middle" font-size="30" font-weight="bold" fill="#3498db" stroke="#e74c3c" stroke-width="1">Both</text>
<text x="250" y="60" text-anchor="middle" font-size="30" font-weight="bold" fill="none" stroke="#2ecc71" stroke-width="2">Stroke</text>

小结

stroke属性控制图形轮廓：

• 支持多种颜色格式
• 特殊值：none、currentColor
• stroke-opacity单独控制透明度
• 支持渐变描边
• 描边居中分布在路径两侧
• 常用于图标、文字效果