详细介绍SVG的stroke-width线宽属性，包括宽度设置、单位使用和实际应用场景。通过实例掌握如何控制描边的粗细。 stroke-width属性定义描边的宽度，即线条的粗细程度。
<element stroke-width="宽度值"/>
<line x1="30" y1="30" x2="90" y2="30" stroke="#3498db" stroke-width="1"/>
<line x1="30" y1="50" x2="90" y2="50" stroke="#3498db" stroke-width="2"/>
<line x1="30" y1="75" x2="90" y2="75" stroke="#3498db" stroke-width="5"/>
<line x1="30" y1="105" x2="90" y2="105" stroke="#3498db" stroke-width="10"/>
可以使用px、em、pt、cm等单位，默认单位是用户坐标单位（通常等同于px）。
<line x1="30" y1="30" x2="90" y2="30" stroke="#3498db" stroke-width="2px"/>
<line x1="120" y1="30" x2="180" y2="30" stroke="#3498db" stroke-width="0.5em"/>
<line x1="210" y1="30" x2="270" y2="30" stroke="#3498db" stroke-width="3pt"/>
百分比相对于当前视口的尺寸。
<line x1="20" y1="50" x2="180" y2="50" stroke="#e74c3c" stroke-width="5%"/>
stroke-width的默认值是1。
<line x1="30" y1="50" x2="170" y2="50" stroke="#3498db"/>
描边以路径为中心，一半在内部，一半在外部。
<rect x="50" y="50" width="80" height="50" fill="#3498db" stroke="#e74c3c" stroke-width="20"/>
<circle cx="60" cy="50" r="30" fill="none" stroke="#3498db" stroke-width="1"/>
<circle cx="150" cy="50" r="30" fill="none" stroke="#3498db" stroke-width="3"/>
<circle cx="240" cy="50" r="30" fill="none" stroke="#3498db" stroke-width="5"/>
<rect x="20" y="20" width="160" height="110" fill="none" stroke="#ecf0f1" stroke-width="10"/>
<rect x="40" y="40" width="120" height="70" fill="none" stroke="#bdc3c7" stroke-width="5"/>
<rect x="60" y="55" width="80" height="40" fill="none" stroke="#3498db" stroke-width="2"/>
<line x1="30" y1="80" x2="30" y2="20" stroke="#e74c3c" stroke-width="20"/>
<line x1="80" y1="80" x2="80" y2="40" stroke="#f39c12" stroke-width="20"/>
<line x1="130" y1="80" x2="130" y2="30" stroke="#3498db" stroke-width="20"/>
<line x1="180" y1="80" x2="180" y2="50" stroke="#9b59b6" stroke-width="20"/>
<line x1="230" y1="80" x2="230" y2="25" stroke="#2ecc71" stroke-width="20"/>