CODEWITHSUNDEEP
javascriptsvg
arrow
arrow

Reputation: 174

Testing for SVG mask support in JS

Is there a way to test for SVG mask support in Javascript? I looked in modernizr, I didn't find anything. I'm using Snap.svg, and I looked at all the attributes in the object before it was added to the dom and it looks the same.

Upvotes: 1

Views: 173

Answers (2)

Johannes Ewald
Johannes Ewald

Reputation: 17805

Probably not the most elegant solution, but this worked for me:

var browserSupportsSvgMasks = (function () {
    var el = document.createElement("div");
    var result;

    if (typeof window.getComputedStyle !== "function") {
        // IE8 has no window.getComputedStyle and does not support svg
        return false;
    }

    el.style.visibility = "hidden";
    el.style.position = "absolute";
    el.innerHTML = '<svg version="1.0" xmlns="http://www.w3.org/2000/svg"><rect mask="url()" /></svg>';
    document.body.appendChild(el);
    result = window.getComputedStyle(el.firstChild.firstChild).width === "auto";
    document.body.removeChild(el);
    return result;
})();

Feel free to improve and give feedback.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 123985

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Mask", "1.0") should do it

Upvotes: 1

Related Questions