stroke属性仅控制描边颜色，stroke-width才决定粗细；二者须成对使用，缺一不可；stroke-width=0可强制隐藏描边；stroke-linecap和stroke-linejoin显著影响粗线端点与转角形态；stroke-dasharray数值为绝对单位，响应式中易失真；stroke-opacity与fill-opacity独立但叠加时产生非线性透明效果。
stroke 属性本身不控制宽度，只管颜色；真正决定描边粗细的是 stroke-width —— 这是初学者最容易混淆的点。
stroke 和 stroke-width 必须成对出现才有效
stroke 设置描边颜色，stroke-width 设置描边粗细，二者缺一不可。只写 stroke="red" 而没设 stroke-width，图形可能完全不可见（默认值为 1，但某些环境或缩放下会“消失”）。
- 浏览器默认
stroke-width是1（单位是 px），不是0，但若图形太小或有抗锯齿干扰，视觉上容易误判为“没描边” -
stroke-width支持带单位（如2px、0.5em），也支持无单位数值（如3），后者在 SVG 坐标系中直接对应用户单位，更稳定 - 设为
stroke-width="0"会强制隐藏描边，比stroke="none"更可靠（后者仅清颜色，不干预宽度逻辑）
stroke-linecap 和 stroke-linejoin 影响端点与转角形状
当描边变粗（比如 ≥4px）或路径含锐角/短线段时，stroke-linecap 和 stroke-linejoin 的取值会显著改变视觉结果，不是“可有可无”的装饰项。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
stroke-linecap="round"让线段两端变成半圆，适合波浪线、手绘风；"butt"（默认）截平，边缘利落；"square"会额外延伸半个线宽，可能溢出容器 -
stroke-linejoin="miter"（默认）在尖角处拉出长刺，stroke-miterlimit超过阈值会自动降级为bevel；"round"更安全，但渲染开销略高 - 例如：画一个
<polyline points="10,10 50,10 50,50"></polyline>，用stroke-width="8"+stroke-linejoin="miter"，右下角大概率出现突兀尖刺
stroke-dasharray 控制虚线节奏，但注意坐标系缩放影响
stroke-dasharray 的数值是绝对长度单位，不受 viewBox 缩放影响——这意味着在响应式 SVG 中，虚线密度可能随容器尺寸变化而失真。
- 写成
stroke-dasharray="5,5"表示“画 5px、空 5px”循环；"10,2,2,2"是“长划-短空-短划-短空”节奏 - 如果 SVG 启用了
preserveAspectRatio="none"或通过 CSS 强制宽高比拉伸，stroke-dasharray仍按原始坐标系计算，虚线会拉长或压缩 - 替代方案：用
<pattern></pattern>定义可缩放虚线纹理，或 JS 动态重算 dasharray 值适配当前getBBox()
stroke-opacity 和 fill-opacity 独立生效，但混合时易踩透明度叠加坑
stroke-opacity 只作用于描边，不影响填充；但若描边和填充颜色相同且都设了 opacity，人眼看到的其实是两次 alpha 混合，不是简单“变淡”。
- 例如：
fill="blue" fill-opacity="0.5"+stroke="blue" stroke-opacity="0.5"，重叠区域实际是1 - (1-0.5)×(1-0.5) = 0.75不透明度，中心比边缘更实 - 要实现均匀半透效果，建议统一用
opacity="0.5"（作用于整个元素），而非分别设 fill/stroke 的 opacity -
stroke-opacity无法继承，必须显式声明；currentColor作为stroke值时，opacity 仍只作用于描边部分
真实项目里最常被忽略的，是 stroke-width 在不同缩放上下文中的行为一致性——它不随 CSS transform: scale() 缩放，也不随 viewBox 比例自动适配，得靠开发者自己盯住数值含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
