Question

我一直在努力制作长方形羽毛和图像。我被链接到一个用于屏蔽和剪裁的文档。我想我可以使用它，但我无法弄清楚为什么矩形面具不起作用。我发布代码我试图使用underneeth，感谢提前的任何意见！

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <mask id="mask">
      <rectangle x="0" y="0" height="100px" width="100px" fill="white"       filter="url(#filter)"></rectangle>
    </mask>
  </defs>
  
  <image class="test" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>

＆＃13;

提一下，我让这个与椭圆标签一起工作！

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <mask id="mask">
      <ellipse cx="50%" cy="50%" rx="60" ry="100" fill="white" filter="url(#filter)"></ellipse>
    </mask>
  </defs>
  
  <image class="test" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>

＆＃13;

Answer 1

标记应为rect而不是rectangle。 <rect...></rect>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="5"/>
    </filter>
    <mask id="mask">
    <rect x="35" y="20" height="130px" width="100px" fill="white" filter="url(#filter)"></rect>
    </mask>
  </defs>
  
  <image class="test" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image>
</svg>

如何用css制作一个矩形蒙版

1 个答案: