web-dev-qa-db-ja.com

クリップエッジをMicrosoft Edgeで動作させる方法は？

FirefoxとMicrosoft Edge（ME）のクリップヘッダーを作成する際に、clip-path。 FirefoxでclipPath要素をSVG要素とclip-pathスタイルはHTML要素内にあります。この同じコードをMEで開いても、何も表示されません。

html,body,header {

        margin:0px;

        height:100%;

    font-family: Arial Unicode MS;

}
button:hover {
    transition:background-color 0.5s linear;
}
a:hover,li:hover {
    opacity: 0.5;
    transition:opacity 0.4s linear
}
#header {
    width: auto;
    height: 100%;
} 
/************************** BANNER-SLIDER-HEADER BEGIN ************************/

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
    -webkit-clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
    clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
    -webkit-clip-path: url("#clipping");
    clip-path: url("#clipping");
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.fill:before {
    position: absolute;
    content: '';
    background-image: -moz-linear-gradient( -34deg, rgb(1,189,164) 0%, rgb(0,63,130) 100%);
    background-image: -webkit-linear-gradient( -34deg, rgb(1,189,164) 0%, rgb(0,63,130) 100%);
    background-image: -ms-linear-gradient( -34deg, rgb(1,189,164) 0%, rgb(0,63,130) 100%);
    opacity: 0.741;
    width: 100%;
    height: 100%;
}

.carousel-indicators {
    margin-bottom: 50px;
    z-index: 3;
}

.controles.izq {
    top: 50%;
    background-image: none;
}

.controles.der {
    right:0; 
    left: auto;
    background-image: none;
    top: 50%;
}

.controles {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    text-align: center;
    opacity: 0.5;
    color: white;
}

.controles:hover {
    opacity: 1;
}

.carousel-caption {
    right: 20%;
    left: 20%;
    top: 20%;
    text-align: left;
}
.carousel-caption>h1, .carousel-caption>h2, .carousel-caption>h3{
    font-family: Arial Unicode MS;
    color: white;
    margin: 0px;
    padding: 5px 0 5px 0;
}

.carousel-caption>h1 {
    font-size: 50px;
}

.carousel-caption>h2 {
    font-size: 40px;
}

.carousel-caption>h3 {
    font-size: 30px;
}

#banner-text>h1 {
    font-size: 35px;
}

#banner-text>h1 {
    font-size: 50px;
}

#banner-text>h1 {
    font-size: 30px;
}

.carousel-caption>button {
    margin-top: 30px;
    border-width: 2px;
    border-radius: 20px;
    border-color: rgb(255, 255, 255);
    border-style: solid;
    background: none;
    width: 167px;
    height: 44px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: white;
}

.carousel-caption>button:hover {
    background-color: white;
    color: rgb(1, 189, 164);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

/************************** BANNER-SLIDER-HEADER ENDS ************************/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oswald:300,400,700" rel="stylesheet">
<link href="//db.onlinewebfonts.com/c/11042b651fd7f35b3d432db7b140e5f6?family=Arial+Unicode+MS" rel="stylesheet" type="text/css"/>

<body>
  <header>
    <div id="header">
      <div id="myCarousel" class="carousel slide">
        <style>
          .carousel-inner {
              height: 100%;
              -webkit-clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
              clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
              -webkit-clip-path: url("#clipping");
              clip-path: url("#clipping");
              p
          }
        </style>
        <div class="carousel-inner">
          <div class="item active">
              <div class="fill" style="background-image:url('images/banner-header.jpg');">
              </div>
              <div class="carousel-caption">
                  <h1>工作签证保险</h1>
                  <h2>485/457/417/462</h2>
                  <h3>工作访问者医疗保险</h3>
              </div>
          </div>
        </div>
        <svg width='0' height='0'>
          <defs>
            <clipPath id="clipping" clipPathUnits="objectBoundingBox">
                <polygon points="0 0, 0 1, 1 0.85, 1 0"/>
            </clipPath>
          </defs>
        </svg>
            <!-- Controls -->
        <a class="izq controles" href="#myCarousel" data-slide="prev">
          <span class="icon-prev"><img src="images/btn-prev.png" alt="prev">
          </span>
        </a>
        <a class="der controles" href="#myCarousel" data-slide="next">
          <span class="icon-next"><img src="images/btn-next.png" alt="next">
          </span>
        </a>
      </div>
    </div>
  </header>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
  </script>
</body>
htmlcsssvgmicrosoft-edgeclip-path
12
Kenny Amaro

Microsoftは、SVGでCSS clip-pathプロパティのみをサポートしています。

#foo { clip-path: url(#myClipPath) }
#content { position: relative; }
#content span { position: absolute; } 
#content span { top:50px; left: 50px; }
<div id="content">
  <span>Hi</span>
  <svg width="400" height="400">
                
      <defs>
        <clipPath id="myClipPath">
          <circle cx=100 cy=100 r=50 />
        </clipPath>
      </defs>
                        
          <path id="foo" d="M 50,100 Q 150,50 250,100" stroke="hotpink" stroke-width="10" fill="white"></path>
  </svg>
</div>

相対/絶対配置を使用して、HTMLコンテンツをクロスブラウザーソリューションとしてSVGに重ねます。

参考文献

8
Paul Sweatte