Question

我刚刚发现了clipPathUnits =“objectBoundingBox”，它在大多数情况下按预期工作。

但是，当文本元素作为剪贴蒙版的一部分包含且字体大小设置为0.5或低于0.5时，Chrome不会表现出来。使用大于0.6的字体大小可以按预期工作。

此代码集应该可以在Firefox中正常运行，但在Chrome中会失败，除非您将字体大小调整为.6或更高。 http://codepen.io/jasonpearson/pen/rLGGEZ

我错过了某个webkit前缀吗？我在http://caniuse.com/#search=clip-path

上没有看到这个特殊问题

<style>
  * { margin: 0; padding: 0; } 
  svg { border: 1px solid red; }
  .clipped-container { width: 500px; height: 200px; border: 1px solid green;}
  .clipped { width: 100%; height: 100%; background-color: green; -webkit-clip-path: url('/#clipper'); }
</style>

<svg width="500px" height="200px">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <text x="0" y=".8" font-size=".6" textLength="1">Hola</text>
    </clipPath>
  </defs>

  <rect x="0" y"0" width="500px" height="200px" fill="red" clip-path="url(#clipper)"></rect>
</svg>

<div class="clipped-container">
  <div class="clipped"></div>
</div>

Chrome不会将clipPath中SVG文本元素的特定字体大小设置为objectBoundingBox

0 个答案: