Question

clip-path:shape()似乎不适用于IE（毫不奇怪）和Firefox（有点惊讶）。有没有办法测试剪辑路径支持？我用的是modernizr。（顺便说一句，我知道我可以使用SVG和-webkit-clip-path:url(#mySVG)）

来实现这一点

Answer 1

你刚才问过这个问题，说实话，我不确定Modernizr是否还没有添加对此的支持，但在这种情况下你很容易推出自己的测试。

步骤如下：

创建但不附加DOM元素。
通过检查新创建的元素（style的JS element.style.clipPath === ''属性（如果它可以支持它）来检查它是否支持任何类型的clipPath。
通过使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;
};

这是一个代码概念验证：http://codepen.io/anon/pen/YXyyMJ

Answer 2

您可以使用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);

Check this codepen看到它的实际效果。

如何测试剪辑路径支持？

2 个答案: