当引用为 css 剪辑路径 属性 时,SVG 剪辑路径定位不正确
SVG clipping path is positioned incorrectly when referenced as css clip-path property
我设置了这个码笔: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>
您可以将 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>
我设置了这个码笔: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>
您可以将 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>