为什么在有Chrome浏览器和Firefox的情况下snapsvg掩码不起作用 <base> 标头中的标签？

Question

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. 该掩码可在IE 10中按预期工作，但在Firefox 32和Chrome 37中无法正常工作。

What is wrong ? 怎么了？

EDIT After user13500 answer. 在user13500回答之后进行编辑。 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. 标题中的基本标签似乎阻止了它在FF和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/">

Answer 1

Yes, as commented by @Robert Longson , the masks url change with the base tag. 是的，正如@Robert Longson所评论的那样，掩码URL随base标签而改变。 You can reproduce the sample by plain HTML/SVG as: 您可以通过纯HTML / SVG将示例复制为：

<!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. 此处的url url('#Si0fh161e4')使用http://127.0.0.1/mySiteDev/进行更正，其中必须包含文档。 Eg 例如

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. 我在Snap文档中未找到有关URL设置基础的任何内容，但我会进一步查找。

Old answer: 旧答案：

Your code works fine here. 您的代码在这里工作正常。 Chrome 37, Firefox 32, Opera 12. 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>

Answer 2

I encountered this mask url() issue in AngularJS template which contained similar svg structure like in this jsfiddle . 我在AngularJS模板中遇到了这个mask url（）问题，该模板包含类似jsfiddle的 svg结构。 That worked fine until I noticed that it wasn't working in "search" page. 直到我注意到它在“搜索”页面中不起作用之前，它一直运行良好。 I finally found this Stackoverflow thread and did some extra research, in my site base tag is always something like this 我终于找到了这个Stackoverflow线程并做了一些额外的研究，在我的网站基础标签中总是这样

 <base href="/en/search/">

when you are in url "http ://example.com/en/search/?q=something" 当您使用网址“ http://example.com/en/search/?q=something”时

In my AngularJS template I had to add "{{path}}" in to mask url. 在我的AngularJS模板中，我必须添加“ {{path}}”来屏蔽网址。 (check that fiddle for full svg) （检查小提琴以获取完整的svg）

<rect x="0" y="0"  width="48" height="47" fill="#008FDB" mask="url({{path}}#arrowShape)"></rect>

In my research I noticed that I only needed to add "window.location.search" in to that "path" variable and everything started to work also in "search" page. 在我的研究中，我注意到我只需要在该“ path”变量中添加“ window.location.search”，并且所有内容也都可以在“ search”页面中开始工作。 BUT 100% working version needed also some js logic, because I noticed that if your url is like "http ://example.com/en/?" 但是100％工作版本也需要一些js逻辑，因为我注意到，如果您的网址是“ http：//example.com/en/？”

Internet Explorer will return "?" Internet Explorer将返回“？” from "window.location.search". 来自“ window.location.search”。 Chrome, Safari, Firefox and Opera will return just "" which is not enough to that svg mask to work. Chrome，Safari，Firefox和Opera将仅返回“”，这不足以使该svg掩码正常工作。

$scope.path = '';
var tmp = $window.location.search;
if(tmp !== "") {
   $scope.path = tmp;
}
else if(/\?$/.test($window.location.href)) {
   $scope.path = '?';
}

After this svg mask started working consistently. 此svg遮罩开始正常工作后。 (As a sidenote I have html5mode turned off.) （作为旁注，我关闭了html5mode。）

Answer 3

Here's the fix (in svg.js and dist files): https://github.com/adobe-webplatform/Snap.svg/issues/325 这是修复程序（在svg.js和dist文件中）： https : //github.com/adobe-webplatform/Snap.svg/issues/325

URL = Snap.url = function (url) {
    // return "url('#" + url + "')";
    return "url('" + window.location.pathname + "#" + url + "')";
};

为什么在有Chrome浏览器和Firefox的情况下snapsvg掩码不起作用 <base> 标头中的标签？

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-09-23 16:14:31

Old answer: 旧答案：

解决方案2
1 2016-03-10 17:58:23

解决方案3
0 2015-09-22 11:22:07

为什么在有Chrome浏览器和Firefox的情况下snapsvg掩码不起作用 <base> 标头中的标签？

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-09-23 16:14:31

Old answer: 旧答案：

解决方案2 1 2016-03-10 17:58:23

解决方案3 0 2015-09-22 11:22:07

解决方案1
3 已采纳 2014-09-23 16:14:31

解决方案2
1 2016-03-10 17:58:23

解决方案3
0 2015-09-22 11:22:07