如何仅高亮SVG中<text>内的<tspan>？现有滤镜覆盖整个节点

问题核心是默认滤镜会基于整个<text>元素的边界框渲染背景，导致高亮覆盖全部文本。要让背景只包裹<tspan>，可以用以下两种实用方案：

方案1：给单独应用滤镜（推荐） #

直接给需要高亮的<tspan>绑定滤镜，并调整滤镜的单位属性，让滤镜计算基于<tspan>自身的边界框，而非父元素<text>。

示例代码：

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 调整滤镜单位为基于目标元素的边界框 -->
    <filter id="tspanHighlight" 
            filterUnits="objectBoundingBox" 
            primitiveUnits="userSpaceOnUse">
      <feFlood flood-color="#ffff00" flood-opacity="0.5" />
      <feComposite in="SourceGraphic" operator="over" />
    </filter>
  </defs>

  <text x="50" y="50" font-size="24">
    普通文本内容
    <tspan filter="url(#tspanHighlight)">仅高亮这段</tspan>
    继续普通文本
  </text>
</svg>

参数说明：

• filterUnits="objectBoundingBox"：让滤镜的坐标系以应用它的元素（这里是<tspan>）的边界框为基准，而非整个<text>。
• primitiveUnits="userSpaceOnUse"：确保滤镜内部的图形计算使用用户坐标系，避免缩放或偏移异常。

方案2：用裁剪路径限制滤镜范围（适合特殊场景） #

如果必须给父<text>应用滤镜，可通过<clipPath>指定仅渲染<tspan>所在区域的高亮背景。这种方式需要手动计算<tspan>的位置和宽度，灵活性稍差。

示例代码：

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 裁剪路径：对应tspan的位置和尺寸 -->
    <clipPath id="tspanClip">
      <rect x="120" y="30" width="140" height="30" />
    </clipPath>
    <filter id="highlight">
      <feFlood flood-color="#ffff00" flood-opacity="0.5" />
      <feClipPath clipPath="url(#tspanClip)" /> <!-- 应用裁剪 -->
      <feComposite in="SourceGraphic" operator="over" />
    </filter>
  </defs>

  <text x="50" y="50" font-size="24" filter="url(#highlight)">
    普通文本内容
    <tspan x="120">仅高亮这段</tspan>
    继续普通文本
  </text>
</svg>

注意事项 #

• 若<tspan>未设置x/y，会继承父<text>的位置，但滤镜仍会基于它自身的文本边界框计算。
• 多段<tspan>需要高亮时，直接给每个目标<tspan>添加filter属性即可。

内容的提问来源于stack exchange，提问作者it0101