当引用为 css 剪辑路径属性时,SVG 剪辑路径的位置不正确
Posted
技术标签:
【中文标题】当引用为 css 剪辑路径属性时,SVG 剪辑路径的位置不正确【英文标题】:SVG clipping path is positioned incorrectly when referenced as css clip-path property 【发布时间】: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" fill="yellow" clip-path="url(#myClipPath)" />
</svg>
</div>
【问题讨论】:
仅部分支持或不支持caniuse.com/#search=clip-path SVG 有一个 viewBox,当您在 SVG 上使用 clipPath 时,会应用 viewBox 变换,而当您在 div 上使用它时则不会。如果您希望它相同,请不要使用 viewBox。 【参考方案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" fill="yellow" clip-path="url(#myClipPath)" />
</svg>
</div>
【讨论】:
完美。感谢您的提示。以上是关于当引用为 css 剪辑路径属性时,SVG 剪辑路径的位置不正确的主要内容,如果未能解决你的问题,请参考以下文章