Why the snapsvg mask does not work in Chrome and Firefox when there is a & lt; base & gt; tag in the header?

Here is my code

    var s = Snap("#mySVG");
    var r = s.rect(0,0,100,200,20,20).attr({ stroke: '#FFFFFF', 'strokeWidth': 20, fill: 'red' });
    var clip1 = s.rect(0,0,200,60).attr({ stroke: '#FFFFFF', 'strokeWidth': 1, fill: 'white' });
    r.attr({ mask: clip1 });

The mask works as expected in IE 10 but not in Firefox 32 and Chrome 37.

What is wrong ?

EDIT After user13500 answer. I turned the problem around, started with a blank page and import all elements from my non working page. It appears that a base tag in the header prevent it to work under FF and Chrome. That's looks crazy to me as everything else but masks works, so it's not a script path problem.

 <base href="http://127.0.0.1/mySiteDev/">

Yes, as commented by @Robert Longson, the masks url change with the base tag. You can reproduce the sample by plain HTML/SVG as:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snap base</title>
<style media="screen">
body {
        background: #fff;
}
</style>
<base href="http://127.0.0.1/mySiteDev/">
</head>
<body>
<svg id="mySVG">
<defs>
    <mask id="Si0fh161e4">
        <rect x="0" y="0" width="200" height="60" stroke="#ffffff"
              style="stroke-width: 1px;" fill="#ffffff">
        </rect>
    </mask>
</defs>
<rect x="0" y="0" width="100" height="200" rx="20" ry="20" stroke="#ffffff"
      fill="#ff0000" style="stroke-width: 20px;" mask="url('#Si0fh161e4')">
<!--                                       Problem URL --^              -->
</rect>
</svg>
</body>
</html>

Here the url url('#Si0fh161e4') uses http://127.0.0.1/mySiteDev/, to correct it one have to include document. E.g.

mask="url('the_document.html#Si0fh161e4')"></rect>

or, the somewhat useless;

<base href="//127.0.0.1/mySiteDev/the_document.html">
<base href="the_document.html">
...

which defeats the usability

I have not found anything in the Snap documentation on setting base for URLs, but I'll look further.

Old answer:

Your code works fine here. Chrome 37, Firefox 32, Opera 12.

Result:

Sample snippet, (your code):

window.onload = function () {
    var s = Snap("#mySVG");
    var r = s.rect(0, 0, 100, 200, 20, 20).attr({
        stroke      : '#FFFFFF',
        strokeWidth : 20,
        fill        : 'red'
    });
    var clip1 = s.rect(0, 0, 200, 60).attr({
        stroke      : '#FFFFFF',
        strokeWidth : 1,
        fill        : 'white'
    });
    r.attr({
        mask: clip1
    });
};

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="mySVG"></svg>

Old answer:

Related Articles