2

i have a svg file exported from adobe illustrator and i tried to use it to shape my layer like we did with clip-path : polygon(); but its not working anyway and here is my code

.he-b {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-clip-path: url(svg/Asset1.svg);
  clip-path: url(svg/Asset1.svg);
  background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.24 90.35">
 <defs>
  <style>
   .cls-1{
    fill:#231f20;
   }
  </style>
 </defs>
 <title>
  Asset 1
 </title>
 <g id="Layer_2" data-name="Layer 2">
  <g id="Layer_1-2" data-name="Layer 1">
   <path class="cls-1" d="M39.12,0,0,22.59V67.76L39.12,90.35,78.24,67.76V22.59ZM65.88,60.63,39.12,76.08,12.36,60.63V29.72L39.12,14.27,65.88,29.72Z"/>
  </g>
 </g>
</svg>
Milan Chheda
  • 8,159
  • 3
  • 20
  • 35
mohammad.pro
  • 53
  • 5

1 Answers1

0

check this.

  1. This type property works on Firefox not chrome.
    "xxx.svg#id"
  2. Svg clipPath tag format is not on your sample.

#I think css propery is ok.

some sample ?
see below
using an external svg with clip-path in Firefox
Clip-path for internal and external SVG > jsfiddle.net/stjtudvj/2

naturallucky
  • 1
  • 3