当引用为 css 剪辑路径属性时，SVG 剪辑路径的位置不正确答案

【问题标题】：SVG clipping path is positioned incorrectly when referenced as css clip-path property当引用为 css 剪辑路径属性时，SVG 剪辑路径的位置不正确
【发布时间】：2016-07-09 02:36:16
【问题描述】：

我设置了这个代码笔：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>

【问题讨论】：

仅部分支持或不支持caniuse.com/#search=clip-path
SVG 有一个 viewBox，当您在 SVG 上使用 clipPath 时，会应用 viewBox 变换，而当您在 div 上使用它时则不会。如果您希望它相同，请不要使用 viewBox。

标签： css svg clip

【解决方案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>

【讨论】：

完美。感谢您的提示。