css - 如何测试剪辑路径支持？

Question

clip-path:shape() 似乎在 IE(不足为奇)和 Firefox(有点惊讶)中不起作用。有没有办法测试剪辑路径支持？我使用现代主义。 (顺便说一下，我知道我可以使用 SVG 和 -webkit-clip-path:url(#mySVG))

Answer 1

您刚才问过这个问题，老实说，我不确定 Modernizr 是否还没有添加对此的支持，但在这种情况下进行您自己的测试非常容易。

步骤是:

1. 创建但不附加 DOM 元素。
2. 通过检查新创建元素的 JS style 属性来检查它是否支持任何类型的 clipPath(element.style.clipPath === '' 如果它可以支持它)。
3. 通过使 element.style.clipPath 等于某个有效的 CSS 剪辑路径形状来检查它是否支持 CSS 剪辑路径形状。

当然，它比这复杂一点，因为您必须检查特定于供应商的前缀。

这里是全部:

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