Css 如何测试剪辑路径支持？

剪辑路径：shape（）

在IE（毫不奇怪）和Firefox（有点奇怪）中似乎不起作用。是否有方法测试剪辑路径支持？我使用现代化。（顺便说一句，我知道我可以使用SVG和

-webkit clip path:url（#mySVG）

）来实现这一点。

您刚才问过这个问题，老实说，我不确定Modernizer是否还需要添加对这一点的支持，但在这种情况下，您可以很容易地进行自己的测试

这些步骤是：

创建但不附加DOM元素

通过检查新创建元素的JS

style

属性（

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;
};

var areClipPathShapesSupported=函数（）{
var base='clipPath'，
前缀=['webkit'，'moz'，'ms'，'o']，
属性=[base]，
testElement=document.createElement（'testElement'），
属性='多边形（50%0%，0%100%，100%100%）；
//将带前缀的属性推入属性数组。
for（var i=0，l=prefixes.length；i//首先，它们甚至需要支持剪辑路径（即，您可以使用Modernizer进行测试）

(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);

（功能（现代化）{
//下面是我们将测试的所有值。如果您只想使用一个或两个，请注释掉不需要的测试行。
var测试=[{
名称：“svg”，
值：'url（#test）'
}，//IE中为假阳性，支持SVG片段路径，但不支持HTML元素
{
名称：'插图'，
值：'插入（10px 20px 30px 40px）'
}, {
名称：'圆圈'，
值：'圆（中心60像素）'
}, {
名称：'椭圆'，
值：“椭圆（50%50%在50%50%时）”
}, {
名称：'多边形'，
值：“多边形（50%0%，0%100%，100%100%）”
}
];
var t=0，名称，值，属性；
对于（；t

查看它的运行情况。
哈哈哈…IE和Firefox不是webkit…webkit只在webkit浏览器上受支持。也就是说，Chrome（闪烁前）和Safari。除此之外，我没有有用的答案。Shugsyes很有趣。我应该说“剪辑路径”而不是webkit。然而，我似乎看不到浏览器测试剪辑路径支持的方法。谷歌搜索…找到…有帮助吗？是的，我也看到了。这测试SVG剪辑路径支持，对于Firefox返回true（这是正确的）。但是Firefox不支持剪辑路径：圆圈（）仅剪辑路径：url（#mySVG）.无论如何，我认为我的问题现在已经没有意义了。我只需要测试Firefox和IE，因为这两种浏览器都不支持它。是的，不得不这么做很糟糕（很多测试都是为了功能，而不是用户代理nazis），但你必须做你必须做的。这应该被添加到Modernizer中。我在IE中测试，它正确地检测到svg剪辑路径不受支持（在HTML元素上）。谢谢！不幸的是，这表明剪辑路径在Edge 18中受支持，而实际上不受支持。如果你将上一次测试从
testElement.style[property]更改为！=''
到
testElement.style[property].indexOf（'polygon'））！==-1
它可以工作。Edge将属性值设置为
'none'
而不是空字符串。如果您不想在简单的情况下包含Modernizer，我喜欢它作为较小的选择。这很好，谢谢！您是否找到了一种方法来避免IE在HTML元素的URL剪辑路径上出现误报？