Question

为什么不使用第一个蒙版图片？

<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>

Answer 1

基本上，要使用图像作为遮罩，它是有贡献的白色区域。所以，如果您有黑色/透明图像，则无效。但是，在我们尝试将图像用作过滤器之前，我们可以转换图像。如果我们使用feColorMatrix，我们可以定义一个矩阵，它将为我们反转颜色。通过将此滤镜直接应用于图像，然后使用（变换的）图像作为蒙版，我们可以实现圆形的制作。

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

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width='200' height='200' baseProfile='full' version='1.2'>
  <defs>
	<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>
	
    <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>

＆＃13;

针对过滤器代码致https://gist.github.com/brysongilbert/6062276。

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

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

1 个答案: