Как сделать прямоугольную маску с css

Question

Я пытаюсь в течение нескольких часов сделать прямоугольное перо вокруг и изображение. Я связался с документом для маскировки и отсечения. Я думаю, я мог бы использовать это, но я не могу понять, почему маска прямоугольника не работает. Я отправляю код im, пытающийся использовать 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>

Просто говоря, я получил эту работу с эллипсом TAGG!

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