Internet Explorer y clip-path

Tan lejos como soy consciente de clip-path debería funcionar en IE, como se ha demostrado en muchos artículos, y este tutorial CSS Enmascaramiento

Sin embargo no puedo obtener el siguiente para ejecutar correctamente en IE, pero funciona bien en Chrome.

CSS:

.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);
}

HTML:

<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>

  • Es decir que versión ? SVG es apoyado por IE9+.
  • Es IE9+, es por eso que me sorprendió, se supone que debe funcionar, pero no hay alegría en mi final.
InformationsquelleAutor Eric | 2014-02-20

2 Kommentare

  1. 28

    Después de más profundidad en la investigación, cuando se trabaja con la imagen directamente, es decir, admite clip como en formas rectangulares, pero no clipPath formas complicadas.

    Mi solución fue añadir la imagen SVG como es abajo, y esta vez funciona en Chrome y IE9+.

    Demo JsFiddle

    CSS:

    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;
    }

    HTML:

    <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>

  2. -1

    Vistazo a este Demo JsFiddle es compatible sensible de la imagen y bien documentado

    CSS:

        .member-picture {
          width: 200px; /*Final image width*/
        }
        
        .member-picture image{
          width:100%; /*for responsive image behaviour*/
          clip-path: url('#small-clip');
        }

    HTML:

      <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>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea