文本装饰

详细介绍SVG的文本装饰属性，包括下划线、删除线、上划线等效果。通过实例掌握SVG文本装饰的各种应用技巧。 text-decoration属性用于为文本添加装饰线，如下划线、删除线等。

基本语法

<text text-decoration="装饰类型">文本内容</text>

装饰类型

下划线 underline

<text x="150" y="40" text-anchor="middle" font-size="20" text-decoration="underline" fill="#3498db">
  下划线文本
</text>

<text x="150" y="80" text-anchor="middle" font-size="16" fill="#666">
  <tspan text-decoration="underline">部分</tspan>
  文本下划线
</text>

删除线 line-through

<text x="150" y="40" text-anchor="middle" font-size="20" text-decoration="line-through" fill="#e74c3c">
  删除线文本
</text>

<text x="150" y="80" text-anchor="middle" font-size="16">
  原价：<tspan text-decoration="line-through" fill="#999">¥199</tspan>
  现价：<tspan fill="#e74c3c" font-weight="bold">¥99</tspan>
</text>

上划线 overline

<text x="150" y="45" text-anchor="middle" font-size="20" text-decoration="overline" fill="#2ecc71">
  上划线文本
</text>

组合装饰

多个装饰类型可以同时使用，用空格分隔。

<text x="150" y="35" text-anchor="middle" font-size="18" text-decoration="underline overline" fill="#3498db">
  上划线+下划线
</text>

<text x="150" y="70" text-anchor="middle" font-size="18" text-decoration="underline line-through" fill="#e74c3c">
  下划线+删除线
</text>

<text x="150" y="105" text-anchor="middle" font-size="18" text-decoration="overline underline line-through" fill="#2ecc71">
  三种装饰组合
</text>

装饰样式

text-decoration可以设置颜色和样式。

<text x="150" y="35" text-anchor="middle" font-size="18" text-decoration="underline" fill="#333">
  默认下划线
</text>

<text x="150" y="70" text-anchor="middle" font-size="18" fill="#333" style="text-decoration: underline #e74c3c;">
  红色下划线
</text>

<text x="150" y="105" text-anchor="middle" font-size="18" fill="#333" style="text-decoration: underline wavy #3498db;">
  波浪下划线
</text>

<text x="150" y="140" text-anchor="middle" font-size="18" fill="#333" style="text-decoration: line-through double #2ecc71;">
  双线删除线
</text>

装饰样式值

实用案例

链接样式

<text x="150" y="35" text-anchor="middle" font-size="16">
  <tspan fill="#3498db" text-decoration="underline">点击访问链接</tspan>
</text>

<text x="150" y="70" text-anchor="middle" font-size="16">
  已访问：<tspan fill="#9b59b6" text-decoration="underline">紫色链接</tspan>
</text>

价格对比

<text x="80" y="55">
  <tspan font-size="14" fill="#999" text-decoration="line-through">¥299</tspan>
</text>

<text x="130" y="60">
  <tspan font-size="28" font-weight="bold" fill="#e74c3c">¥99</tspan>
</text>

待办事项

<text x="30" y="35" font-size="16">
  <tspan fill="#2ecc71">✓ </tspan>
  <tspan text-decoration="line-through" fill="#999">已完成任务一</tspan>
</text>

<text x="30" y="65" font-size="16">
  <tspan fill="#2ecc71">✓ </tspan>
  <tspan text-decoration="line-through" fill="#999">已完成任务二</tspan>
</text>

<text x="30" y="95" font-size="16">
  <tspan fill="#95a5a6">○ </tspan>
  <tspan fill="#333">待完成任务三</tspan>
</text>

强调文本

<text x="150" y="40" text-anchor="middle" font-size="18">
  这是一段
  <tspan text-decoration="underline" fill="#e74c3c" font-weight="bold">重点强调</tspan>
  的文本
</text>

<text x="150" y="75" text-anchor="middle" font-size="16" fill="#666">
  <tspan style="text-decoration: underline wavy #e74c3c;">波浪下划线强调</tspan>
  效果
</text>

注意事项

1. 继承性：text-decoration会被子元素继承
2. tspan覆盖：tspan可以覆盖父元素的text-decoration
3. CSS样式：复杂样式建议使用style属性
4. 浏览器兼容：波浪线等样式在部分浏览器支持有限

属性总结