web-dev-qa-db-fra.com

Internet Explorer et chemin de clip

Autant que je sache, clip-path devrait fonctionner dans IE, comme le montrent de nombreux articles et ce tutoriel CSS Masking

Cependant, je ne parviens pas à utiliser correctement le programme ci-dessous sous IE, mais cela fonctionne correctement sous Chrome.

.container {
  position: relative;
  width: 240px;
  height: 500px;
  left: 50%;
  top: 50%;
}

.pentagon {
  -webkit-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
  -o-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
  -ms-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
  float: left;
}

.avatar {
  margin-top: 50px;
}

html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);
}

h1,
p {
  color: rgba(0, 0, 0, .3);
}
<div class="container">
  <div class="avatar">
    <img class="pentagon" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" />
  </div>
</div>

<svg>
  <defs>
    <clipPath id="pentagon" clipPathUnits="objectBoundingBox">
      <polygon points=".5,0 1,.30 .2,1 .2,1 0,.30" />
    </clipPath>
  </defs>
</svg>

htmlcssinternet-explorersvg
10
Eric

Après des recherches plus approfondies, lorsque vous travaillez directement avec l'image, IE prend en charge les éléments tels que les formes rectangulaires, mais pas les formes compliquées de clipPath.

Ma solution a été d’ajouter l’image à un fichier SVG comme ci-dessous, et cette fois-ci cela fonctionne sous Chrome et IE9 +.

Demo JsFiddle

body {
  background-color: #e0e0e0;
}

#image-wrapper {
  position: relative;
}

.svg-background,
.svg-image {
  clip-path: url(#clip-triangle);
}

.svg-image {
  -webkit-transition: all 0.5s ease 0.2s;
  -moz-transition: all 0.5s ease 0.2s;
  opacity: 1;
  transition: all 0.5s ease 0.2s;
}

svg.clip-svg {
  height: 250px;
  position: absolute;
  width: 250px;
}

#svg-1 {
  left: 0px;
  top: 0px;
}
<div id="image-wrapper">
  <svg id="svg-1" class="clip-svg">
        <rect class='svg-background' width="300" height="300" fill="#ffffff" />
        <image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" />
    </svg>
</div>
<svg id="svg-defs">
    <defs>
        <clipPath id="clip-triangle">
            <polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/>
        </clipPath>
    </defs>
</svg>

26
Eric

Regardez cette Demo JsFiddle il supporte une image sensible et bien documentée

    .member-picture {
      width: 200px; /*Final image width*/
    }
    
    .member-picture image{
      width:100%; /*for responsive image behaviour*/
      clip-path: url('#small-clip');
    }
  <svg class="member-picture">
      <image xlink:href="https://via.placeholder.com/350x200"></image>
  </svg>
  <svg viewBox="0 0 250.35696 212.65134"> <!--viewBox = "X1 Y1 X2 Y2"-->
    <defs>
      <clipPath id="small-clip" clipPathUnits="objectBoundingBox"
                  transform="scale(.0039 .0047)">
                  <!--Use clipPathUnits="objectBoundingBox" and transform="scale(1/(viewBox.X2-viewBox.X1) 1/(viewBox.Y2-viewBox.Y1)" -->
        <path      d="M231.76,2.10959c5.989,1.0033,11.34394,3.5405,14.95847,9.74636,5.229,8.97779,3.54658,20.83845,2.65967,30.67514-4.2102,46.31217-8.047,92.66163-12.03267,138.993A28.82369,28.82369,0,0,1,235.49314,189.8c-2.913,7.28451-8.96608,11.54254-17.95131,14.28814-10.36022,3.16575-21.42435,3.0895-32.14721,3.458L40.64126,212.52043c-7.4331.25543-15.17585,0.4528-21.94517-2.62817C9.79852,205.84265,4.11114,196.65751,1.7732,187.16541S-0.05058,167.74594.329,157.97752c1.53266-39.43778.62959-78.92331,0.4924-118.39062C0.7836,28.70009,1.2929,16.57391,9.01875,8.9034,20.99475-2.98675,42.47458.45166,57.6212,0.4913q29.26963,0.07661,58.5389.24813,48.42851,0.2838,96.855.82742C219.161,1.63584,225.777,1.1073,231.76,2.10959Z"
              fill="#4d4d4d">  
        </path>
      </clipPath>
    </defs>
  </svg>

0
Ahmed Asim