Question

我设置了此代码笔：http://codepen.io/jasonpearson/pen/pjKwBZ

取消注释-webkit-clip-path属性时，您可以看到掩码较小，并且在应用于SVG时不像中心那样居中。我如何调整，以便在使用css或svg？

应用时剪贴蒙版显示相同

<style>
  * {
    padding: 0;
    margin: 0;
  }

  svg {
    border: 1px dotted black;
  }

  #myDiv {
    background: blue;
    max-width: 500px;
    //-webkit-clip-path: url('/#myClipPath')
  }
</style>

<div id="myDiv">
    <svg viewBox="0 0 100 100">
    <defs>
      <clipPath id="myClipPath">
        <circle cx="50" cy="50" r="30"/>
      </clipPath>
    </defs>

    <rect x="0" y="0" height="100" width="100" fill="yellow" clip-path="url(#myClipPath)" />
  </svg>  
</div>

Answer 1

您可以将clipPath切换为使用基于objectBoundingBox的坐标，而不是绝对坐标。

  * {
    padding: 0;
    margin: 0;
  }

  svg {
    border: 1px dotted black;
  }

  #myDiv {
    background: blue;
    max-width: 500px;
    -webkit-clip-path: url('/#myClipPath')
  }

<div id="myDiv">
    <svg viewBox="0 0 100 100">
    <defs>
      <clipPath id="myClipPath" clipPathUnits="objectBoundingBox">
        <circle cx="0.5" cy="0.5" r="0.3"/>
      </clipPath>
    </defs>

    <rect x="0" y="0" height="100" width="100" fill="yellow" clip-path="url(#myClipPath)" />
  </svg>  
</div>

当引用为css clip-path属性时，SVG剪切路径定位不正确

1 个答案: