CSS 或 SVG 文本剪辑/蒙版答案

【问题标题】：CSS or SVG text clip / maskCSS 或 SVG 文本剪辑/蒙版
【发布时间】：2014-02-04 15:33:26
【问题描述】：

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

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

注意底部的“这是一些文本”字符串在顶层重叠的地方缺少颜色。顶层文本将是透明的，但也会在与底层文本重叠的任何位置“剔除”或应用透明度。

【问题讨论】：

还请说明您目前是如何做到这一点的，这张图片中的两个示例中哪一个是您想要的结果，并请提供您当前制作的文本的代码。
透明度是绝对必要的，还是可以让前面的文字与背景颜色相同？
抱歉，想要的结果是文本的最后一行。这是一个更好的例子。 jsfiddle.net/OBCENEIKON/LDMD2 我想获得第一个结果，但这是通过将 circle-o 设置为白色来完成的。如果有背景颜色或图像，您最终会看到白色圆圈，我希望它是透明的，以便您看到后面的图像或颜色。
我知道我可以很容易地画一个圆圈来用作蒙版，但我希望我可以使用字形作为蒙版，这样我就可以使用任何字形而不必使用自定义形状.
您是否认为用包含某些文本的<text> 元素替换<circle> 元素不起作用？你试过了吗？用面具发布你到目前为止得到的代码。

标签： css svg

【解决方案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>

【讨论】：

正是我想要的！谢谢！