Question

我有这个简单的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中工作正常）

Answer 1

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

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

请参阅fiddle。

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

1 个答案: