CODEWITHSUNDEEP
csssvg
M Luffy
M Luffy

Reputation: 53

clip-path url fails to find id

I have an SVG that I am trying to use to clip a div, but the id I give to the <clipPath> tag does not work.

I have tried changing the ID, and have made sure that the SVG does indeed exist in the same file, and the ID is visible.

The svg is like so:

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559">
    <defs>
    <clipPath id="clipper">
    <g id="svgg" stroke="none" fill-rule="evenodd">
         <path  id="path0" d= .../>
         <path  id="path1" d= .../>
         <path  id="path2" d= .../>
         <path  id="path3" d= .../>
         <path  id="path4" d= .../>
    </g>
    </clipPath>
    </defs>
</svg>

I added the <defs> and <clipPath> tag so I could use the svg I had as a clipping mask.

The html element being used is:

<div class="logo-bg" style="clipPath: url(#clipper)"></div>

the div does have a width and height.

Within developer tools, the css property of the div I am trying to clip with clip-path: url(#clip-id) shows "could not load the image". Ideally I would be able to clip the div with the SVG.

here's the code I am working with: https://jsfiddle.net/mzLtsqva/6/

I am new to working with SVGs and so would appreciate any help to solve this issue.

Upvotes: 0

Views: 2002

Answers (1)

enxaneta
enxaneta

Reputation: 33054

Inside the <clipPath> don't wrap the paths in a group element.

In the next example I'm using a clipping path that is not working: #no and one that is working: #yes. In the one that is not working I'm wrapping the elements inside in a <g> element.

svg{border:1px solid;}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
 <rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/> 
 <clipPath id="no"> 
   <g>
    <use xlink:href="#rect" fill="none"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
    </g>
 </clipPath>   
  </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>  
</svg>

<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>  
 <clipPath id="yes">  
    <use xlink:href="#rect" fill="none"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>  
 </clipPath>   
  </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>  
</svg>

Upvotes: 1

Related Questions