如何添加虚线样式的文本与特殊符号？已了解dashArray属性相关内容

以下是两种可直接落地的实现方式，可根据场景选择：

方案1：CSS 实现（适配普通文本场景，无需引入SVG） #

如果只需要给文本加虚线型的下划线、上划线或删除线，直接用CSS原生text-decoration属性即可实现：

.dashed-text {
  /* 语法：text-decoration: 线条类型 线条样式 颜色 粗细 */
  text-decoration: underline dashed #2563eb 2px;
  /* 调整下划线和文本的间距，避免紧贴文字 */
  text-underline-offset: 4px;
  /* 特殊符号和文本会自动继承该样式，无需单独配置 */
}

方案2：SVG 实现（支持自定义虚线描边，适配dashArray配置） #

如果需要文本/特殊符号本身的轮廓为虚线，可直接用SVG的stroke-dasharray属性实现，自由度更高：

<svg width="350" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 虚线描边文本示例 -->
  <text x="20" y="50" font-size="32" font-weight="bold"
        fill="transparent"
        stroke="#ef4444"
        stroke-width="2"
        stroke-dasharray="4 2" <!-- 4px实线 + 2px空隙，可按需调整数值 -->
        stroke-linecap="round">
    虚线文本★示例
  </text>
  <!-- 带填充的虚线描边特殊符号示例 -->
  <text x="20" y="85" font-size="28"
        fill="#fef3c7"
        stroke="#f59e0b"
        stroke-width="1.5"
        stroke-dasharray="3 1">
    ✦✧✪ 特殊符号组合
  </text>
</svg>

补充配置说明： #

• stroke-dasharray可传入多组数值实现更复杂的虚线节奏，比如stroke-dasharray="5 2 1 2"即可实现长短交替的虚线效果
• 如需嵌入普通文本流，可给SVG标签设置display: inline-block，高度宽度随内容自适应即可

内容的提问来源于stack exchange，提问作者Zhang-fulin