SVG裁剪文本溢出后不可见，如何实现文本自动换行？

要实现文本自动换行同时保留背景反色的裁剪效果，你需要调整SVG的mask实现方式，让它支持多行文本。以下是修改后的完整代码：

<div class="base">
  <div class="headline">
    Awesome Headline That Needs to Wrap
    <svg>
      <clipPath id="mask">
        <foreignObject width="100%" height="100%">
          <div class="mask-text">
            Awesome Headline That Needs to Wrap
          </div>
        </foreignObject>
      </clipPath>
    </svg>
  </div>
</div>

<style>
body {
  background: url('https://images.pexels.com/photos/2179483/pexels-photo-2179483.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') no-repeat;
  background-size: cover;
}

.base {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 400px;
}

.headline {
  position: relative;
  font: 50px system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 30px;
  color: transparent;
  word-wrap: break-word;
}

.headline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: invert(100%);
  clip-path: url(#mask);
}

.mask-text {
  font: 50px system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 30px;
  width: 100%;
  word-wrap: break-word;
  margin: 0;
}

svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
</style>

关键修改说明： #

• 替换SVG文本元素：用<foreignObject>嵌入HTML文本容器，让文本可以通过CSS的word-wrap: break-word实现自动换行，解决原SVG <text>不支持换行的问题。
• 分离文本与滤镜层：将原文本设为透明，通过伪元素单独应用backdrop-filter，再用SVG的clip-path裁剪出文本形状，确保反色效果只覆盖文本区域。
• 同步样式：让mask内的文本样式（字体、字间距、宽度）与显示文本完全一致，保证裁剪形状精准匹配。
• 隐藏SVG容器：将SVG设为宽高0并隐藏溢出，避免它占据布局空间。

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