Question

我尝试使用svg来模拟clippath，因为跨浏览器支持不是很好，但每次尝试我遇到同样的问题：svg有效，但它很小而且没有缩放到我应用它的元素。我尝试了一切，但我似乎无法弄清楚错误

<div id="container">  
  <div id="target">
    <div id="Box_Collectors">      
      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

       <div class="blackBox">
        <h1>TITLE</h1>
        <div> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

       <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. </div>            
      </div>      
    </div>
  </div>


<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     class="" viewBox="0 0 100 100" clipPathUnits="objectBoundingBox">
      <defs>
        <clipPath id="blackBox-clip">
          <polygon points="100 0, 100 100, 0 100, 0 35, 15 25, 0 15, 0 0"></polygon>          
      </clipPath>
      </defs>
    </svg>

</div>

这是css：

    *{color:#fff}


.blackBox{background:#000;position:relative;z-index:100;height:300px;width:300px;margin: auto;padding-left:60px;
/*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);*/

-webkit-clip-path: url("#blackBox-clip");
    clip-path: url("#blackBox-clip");

}

https://jsfiddle.net/Aivirth/dxa890mq/来证明问题

Answer 1

你需要两件事来完成这项工作。第一个clipPathUnits属于clipPath元素，而用于objectBoundingBox的单位是边界框的一部分。这将做你想要的：

<clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
        <polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
</clipPath>

* {
  color: #fff
}
.blackBox {
  background: #000;
  position: relative;
  z-index: 100;
  height: 300px;
  width: 300px;
  margin: auto;
  padding-left: 60px;
  /*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);*/
  -webkit-clip-path: url("#blackBox-clip");
  clip-path: url("#blackBox-clip");
}

<div id="container">
  <div id="target">
    <div id="Box_Collectors">
      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>

      <div class="blackBox">
        <h1>TITLE</h1>
        <div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
          by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
      </div>
    </div>
  </div>


  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" class="" viewBox="0 0 100 100">
    <defs>
      <clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
        <polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
      </clipPath>
    </defs>
  </svg>

</div>

Answer 2

在safari 10.0.2（12602.3.12.0.1）中它只渲染第一个框，奇怪的是在我的WIP网站上，一旦我向上滚动到页面中的某个点，它们就会重新出现。

导致这种情况的原因是什么？

内联SVG未缩放到父级

2 个答案: