如何测试剪切路径支持？

Question

如何测试剪切路径支持？

8

clip-path:shape() 在IE中不起作用(这并不奇怪)，在Firefox中也有点出乎意料。有没有一种方法来测试对于 clip-path的支持？我使用 modernizr。(顺便说一下，我知道使用 SVG和 -webkit-clip-path:url(#mySVG) 可以使这个效果工作。)

- user1214678

哈哈哈哈...IE和Firefox不是Webkit浏览器...Webkit仅支持-等待它- Webkit浏览器。也就是说，Chrome（Blink之前）和Safari。除此之外，我没有有用的答案。耸肩 - Phil Tune

是挺有趣的。我应该说“clip-path”，而不是webkit。然而，我似乎找不到一种浏览器测试clip-path支持的方法。 - user1214678

谷歌搜索...找到了http://modernizr.com/docs/#features-misc...这有帮助吗？ - Phil Tune

是的，我也看到了。这个测试是为了检测SVG剪贴路径支持情况，对于火狐浏览器返回true（这是正确的）。但是火狐浏览器不支持clip-path:circle()，只支持clip-path:url(#mySVG)。无论如何，我现在认为我的问题没有意义了。我只需要测试火狐和IE浏览器，因为它们是不支持它的两种浏览器。 - user1214678

1

是的，不得不这样做有点糟糕（很多测试能力而非用户代理的纳粹主义者存在），但你必须做你必须做的事情。 - Phil Tune

括号加一。 - user1214678

2个回答

4

您可以使用Modernizr进行测试。

(function (Modernizr) {

    // Here are all the values we will test. If you want to use just one or two, comment out the lines of test you don't need.
    var tests = [{
            name: 'svg',
            value: 'url(#test)'
        }, // False positive in IE, supports SVG clip-path, but not on HTML element
        {
            name: 'inset',
            value: 'inset(10px 20px 30px 40px)'
        }, {
            name: 'circle',
            value: 'circle(60px at center)'
        }, {
            name: 'ellipse',
            value: 'ellipse(50% 50% at 50% 50%)'
        }, {
            name: 'polygon',
            value: 'polygon(50% 0%, 0% 100%, 100% 100%)'
        }
    ];

    var t = 0, name, value, prop;

    for (; t < tests.length; t++) {
        name = tests[t].name;
        value = tests[t].value;
        Modernizr.addTest('cssclippath' + name, function () {

            // Try using window.CSS.supports
            if ('CSS' in window && 'supports' in window.CSS) {
                for (var i = 0; i < Modernizr._prefixes.length; i++) {
                    prop = Modernizr._prefixes[i] + 'clip-path'

                    if (window.CSS.supports(prop, value)) {
                        return true;
                    }
                }
                return false;
            }

            // Otherwise, use Modernizr.testStyles and examine the property manually
            return Modernizr.testStyles('#modernizr { ' + Modernizr._prefixes.join('clip-path:' + value + '; ') + ' }', function (elem, rule) {
                var style = getComputedStyle(elem),
                    clip = style.clipPath;

                if (!clip || clip == "none") {
                    clip = false;

                    for (var i = 0; i < Modernizr._domPrefixes.length; i++) {
                        test = Modernizr._domPrefixes[i] + 'ClipPath';
                        if (style[test] && style[test] !== "none") {
                            clip = true;
                            break;
                        }
                    }
                }

                return Modernizr.testProp('clipPath') && clip;
            });
        });
    }

})(Modernizr);

点击这个codepen链接可以查看它的实际效果。

- Silvestre Herrera

太好了，谢谢！你有想到避免在HTML元素的URL剪切路径上出现IE误报的方法吗？ - Gregory Avery-Weir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jwest · Accepted Answer

你之前问过这个问题，说实话，我不确定Modernizr是否已经支持了这个功能，但在这种情况下自己编写测试很容易。

步骤如下：

创建一个DOM元素，但不要添加到文档中。
通过检查新创建的元素的JS style属性（如果它可以支持，则为element.style.clipPath ===''）来检查它是否支持任何类型的clipPath。
通过将element.style.clipPath设置为一些有效的CSS clip path shape来检查它是否支持CSS clip path shapes。

当然，这比上述步骤还要复杂一些，因为您必须检查厂商特定的前缀。

以下是所有步骤的综合：

var areClipPathShapesSupported = function () {

    var base = 'clipPath',
        prefixes = [ 'webkit', 'moz', 'ms', 'o' ],
        properties = [ base ],
        testElement = document.createElement( 'testelement' ),
        attribute = 'polygon(50% 0%, 0% 100%, 100% 100%)';

    // Push the prefixed properties into the array of properties.
    for ( var i = 0, l = prefixes.length; i < l; i++ ) {
        var prefixedProperty = prefixes[i] + base.charAt( 0 ).toUpperCase() + base.slice( 1 ); // remember to capitalize!
        properties.push( prefixedProperty );
    }

    // Interate over the properties and see if they pass two tests.
    for ( var i = 0, l = properties.length; i < l; i++ ) {
        var property = properties[i];

        // First, they need to even support clip-path (IE <= 11 does not)...
        if ( testElement.style[property] === '' ) {

            // Second, we need to see what happens when we try to create a CSS shape...
            testElement.style[property] = attribute;
            if ( testElement.style[property] !== '' ) {
                return true;
            }
        }
    }

    return false;
};

这是一个 CodePen 的概念验证示例：http://codepen.io/anon/pen/YXyyMJ