如何使用黑色图像作为svg掩码？

为什么不使用第一张掩模图像？

<svg width='200' height='200' baseProfile='full' version='1.2'> 
    <defs> 
    <mask id='svg_mask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'> 
     <image width='200' height='200' 
      xlink:href='http://i.stack.imgur.com/SXnMG.png' /> 
    </mask> 
    </defs> 
    <image mask='url(#svg_mask)' width='200' height='200' y='0' x='0' 
     xlink:href='http://static.timeface.cn/times/0f62b706f726d823393290ef1ee60944.jpg' /> 
</svg>

来源

2016-09-28 MFLife

基本上，要使用图像作为蒙版，它是白色区域的贡献。所以，如果你有一个黑色/透明的图像，你没有任何效果。但是，我们可以变换图像之前，我们尝试使用它作为一个过滤器。如果我们使用feColorMatrix，我们可以定义一个矩阵，它将为我们反转颜色。通过将该过滤器直接应用于图像，然后使用（经过变换的）图像作为蒙版，我们可以实现四舍五入的制作。

我还添加了xmlns属性根节点并删除了xlink:命名空间前缀。

<svg xmlns="http://www.w3.org/2000/svg" width='200' height='200' baseProfile='full' version='1.2'> 
 
    <defs> 
 
\t <filter id='negative'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter> 
 
\t 
 
    <mask id='svg_mask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'> 
 
     <image filter='url(#negative)' width='200' height='200' href='http://i.stack.imgur.com/T5BQj.png' /> 
 
    </mask> 
 
    </defs> 
 
    <image mask='url(#svg_mask)' width='200' height='200' y='0' x='0' href='http://static.timeface.cn/times/0f62b706f726d823393290ef1ee60944.jpg' /> 
 
</svg>

贷记https://gist.github.com/brysongilbert/6062276用于过滤器的代码。

处理SVG颜色反转的另一个问题：How to Invert a White image to Black using SVG Filters?

来源

2016-09-28 14:40:59 enhzflep

如何使用黑色图像作为svg掩码？

回答

相关问题