External SVG file in clippath-CodePudding

I have SVG file that i created it in photoshop. I would like to use it in my html page with clip-path property. I am trying to implement it as using clip-path:url(#mysvg); and paste the svg code to my html page. But i does not work. How can i do that?

My purpose is like this with css:

Here is the .svg file: https://svgshare.com/i/dfw.svg

Here is the svg code

<!--IMAGE-->
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 506" >
    <image id="image"  width="100%" height="100%" clip-path="url(#mask)" x="-100px" xlink:href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The Magic of SVG Clip-path/pic_yo5eyq.png" />
</svg>


<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1920" viewBox="0 0 1920 1920">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
                                                                                              
<?xpacket end="w"?></metadata>
<defs>
    <style>
      .cls-1 {
        fill: #fff;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path id="rect1"  d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</svg>

CodePudding user response：

In this example the viewBox of the <svg> is 100 in width and the image also takes up 100% of the width. So, no matter the actual width of the image it will always fill the entire SVG.

The <clipPath> fits in the size of the viewBox of the <svg> that holds the image. I know the width is 100, so I made the clippath 70 in height and width plus the extra height that the rotation takes up. This matches kind of the height of the images (unknown at this point).

I replaced the content of the <clipPath>. It is more "transparent" what the clip path does and easier to manipulate.

<!--IMAGE-->
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="300">
    <image width="100" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The Magic of SVG Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>


<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <clipPath id="mask" transform="translate(15 0) rotate(-10 60 0)">
      <rect width="50" height="50" />
      <rect x="20" y="20" width="50" height="50" />
      <rect x="20" width="50" height="50" rx="10" />
      <rect y="20" width="50" height="50" rx="10" />
    </clipPath>
  </defs>
</svg>