用于屏蔽元素的 SVG 剪辑路径：Chrome 中的问题答案

【问题标题】：SVG clip-path for masking element: issue in Chrome用于屏蔽元素的 SVG 剪辑路径：Chrome 中的问题
【发布时间】：2014-06-28 19:26:12
【问题描述】：

我有这个简单的 html 页面：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {text-align: center;}
            #dv {
                background-color: red;
                width: 300px;
                height: 300px;
                clip-path: url(#mask);
                -webkit-clip-path: url('#mask'); 
                margin: 0 auto;
            }
            .hidden {width: 0; height: 0;}
        </style>
    </head>
    <body>
        <div id="dv"></div>
        <div class="hidden">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                    <clipPath id="mask">
                         <circle cx="20" cy="20" r="100"/>
                    </clipPath>
                </defs>
                </svg>
        </div>
    </body>
</html>

如果我删除“margin: 0 auto”，我可以看到蒙面的 div。
如何在 chrome 中同时实现边距和蒙版以正常工作？
（在Firefox ot 中工作正常）

【问题讨论】：

一个小提琴来测试这个：jsfiddle.net/8zfW3/1 剪辑实际上被应用了（你可以看到它，如果你将 chrome 调整为更小的窗口大小）。
@easwee：之所以有效，是因为窗口的大小小于 div，所以无法将 div 居中对齐，div 位于 left:0，所以它是与删除边距相同
是的 - 我只是暴露了掩码实际上是用 chrome 渲染的 - 在 css 和 svg 上尝试了一些解决方法，但没有一个能解决问题。可能的 chrome 错误（实际上最新的 Opera 显示相同的行为，所以必须与 webkit 相关）？
Opera 和 Chrome 都使用 Blink，而不是 webkit。在任何情况下，请向crbug.com 报告 Blink 特定的错误，谢谢 :)
重复的code.google.com/p/chromium/issues/detail?id=373358?

标签： html css google-chrome svg

【解决方案1】：

如果需要，您可以使用 circle 关键字：

   -webkit-clip-path: circle(100px at 50% 50%);

见fiddle。

【讨论】：