如何用css製作矩形蒙版

Question

我一直在嘗試幾個小時來製作一個矩形的羽毛和圖像。我被鏈接到了一個用於屏蔽和裁剪的文檔。我想我可以使用這個，但我無法弄清楚爲什麼矩形掩碼不工作。我發佈的代碼即時通訊試圖使用underneeth，感謝您的任何意見提前！

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

就更不用說了，我得到這個與橢圓塔格工作！

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

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>