CSS或SVG文本剪辑/掩码

Question

我不确定这是否可行，但是有没有办法让文本成为剪切路径或掩码？

示例：如果在另一层文本上方有一层文本，请让顶层“敲出”下层，以便可以看到背景。看到下面的链接（对不起，我还没有足够的代表发布图片），我真的不想要字母周围的边框，但我添加它来尝试描述我想要实现的目标。

注意底部“This is some text”字符串如何在顶层重叠的地方缺少颜色。顶层文本将是透明的，但也会在与文本下层重叠的任何地方“敲出”或应用透明度。

Answer 1

您可以使用过滤器执行此操作。理想情况下，我们只需使用两个feImage来导入源文本并将它们合成在一起。但是Firefox还不支持，所以对于跨浏览器，我们坚持使用“绿屏”类型效果并仔细定位源文本。这有点像用大象枪杀死苍蝇。但它确实有效：http://codepen.io/mullany/pen/sogvi

  <svg>
  <filter id="knockoutSpecial">
    <feOffset dy="150" result="pos-text"/>
    <feComposite operator="out" in2="SourceGraphic" in="pos-text" result="cut-red"/>
    <feColorMatrix in="cut-red" result="recolor1" type="matrix" values="0 0 0 0 1
                          0 0 0 0 0.0
                          0 0 0 0 0.1
                          0 0 0 1 0"/>    
    <feColorMatrix in="SourceGraphic" result="empty-red" type="matrix" values="1 0 0 0 0
                          0 1 0 0 0
                          0 0 1 0 0
                          0 -5 0 1 0"/>
    <feColorMatrix in="empty-red" result="recolor2" type="matrix" values="0 0 0 0 0.5
                          0 0 0 0 0.5
                          0 0 0 0 0.5
                          0 0 0 1 0"/>
    <feComposite operator="over" in="recolor1" in2="recolor2"/>
  </filter>

  <g filter="url(#knockoutSpecial)">
    <text x="0" y="-50" font-size="84" font-weight="bold" fill="red">Cutting out text?</text>
    <text stroke="blue" stroke-width="2" fill="green" x="40" y="120" font-size="84" font-weight="bold" font-family="helvetica">No Problem....</text>
  </g>
</svg>