CODEWITHSUNDEEP
javascripthtmlcsssvg
nico 711
nico 711

Reputation: 1

Transparent gradient mask using svg

I need some help about svg's. There is a "background image". Another "image" is laid over it. The "image" has to have a hole cut out of it so that the background image is shining through. I achieved this by using svg: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
<title>Title of the document</title>
<style>
  body{
    background-repeat: no-repeat;
    background-size: cover;
  }
   #svg-door {
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding: 100px;
    width: 100%;
    height: 500px;
  }
  #wood {
    border-radius: 50%;
  }
</style>
  </head>
 <body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
  <defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
      <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
    </pattern>
  </defs>
  <path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z "
        fill="url(#wood)" fill-rule="evenodd"/>
</svg>
</body>

I could not use mask filters of css cause of browser compatibility. I dont want to use a svg/js framework.

So far so good. Now i want to go a step further.

I want this hole to have a transparent gradient. So that the inner rects borders are not that hard as in current version. I dont know how to do it.

Furthermore i want to animate this hole to get bigger over time. I would do it by using js. Is there another way? Maybe by changing the whole structure of html?

Any help is appreciated.

Upvotes: 0

Views: 1255

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Firstly, there should be no issue with masks applied to SVG elements. There are some browser compatibility related to SVG masks being applied to HTML elements, but not when they are applied to SVG elements.

In fact a mask is the obvious solution to your issue. To get the soft edges to the hole, we'll apply a blur filter to a rectangle, then use that as a mask to create the hole.

  body{
    background-repeat: no-repeat;
    background-size: cover;
  }
   #svg-door {
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding: 100px;
    width: 100%;
    height: 500px;
  }
  #wood {
    border-radius: 50%;
  }
<
<body background="https://www.w3schools.com/css/img_fjords.jpg" >

<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
  <defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
      <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
    </pattern>
    
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/>
    </mask>

    <filter id="hole-blur">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>

  <path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/>
</svg>

</body>

Upvotes: 2

Related Questions