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

Question

这是我的代码

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

该掩码可在IE 10中按预期工作，但在Firefox 32和Chrome 37中无法正常工作。

怎么了？

在user13500回答之后进行编辑。 我解决了这个问题，从空白页开始，然后从我的非工作页导入所有元素。 标题中的基本标签似乎阻止了它在FF和Chrome下工作。 对我来说，这很疯狂，因为除了遮罩之外，其他所有东西都起作用，所以这不是脚本路径问题。

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

Answer 1

是的，正如@Robert Longson所评论的那样，掩码URL随base标签而改变。 您可以通过纯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>

此处的url url('#Si0fh161e4')使用http://127.0.0.1/mySiteDev/进行更正，其中必须包含文档。 例如

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

或者，有点没用；

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

破坏了可用性

我在Snap文档中未找到有关URL设置基础的任何内容，但我会进一步查找。

旧答案：

您的代码在这里工作正常。 Chrome 37，Firefox 32，Opera 12。

结果：

在此处输入图片说明

示例代码段（您的代码）：

 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

我在AngularJS模板中遇到了这个mask url（）问题，该模板包含类似jsfiddle的 svg结构。 直到我注意到它在“搜索”页面中不起作用之前，它一直运行良好。 我终于找到了这个Stackoverflow线程并做了一些额外的研究，在我的网站基础标签中总是这样

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

当您使用网址“ http://example.com/en/search/?q=something”时

在我的AngularJS模板中，我必须添加“ {{path}}”来屏蔽网址。 （检查小提琴以获取完整的svg）

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

在我的研究中，我注意到我只需要在该“ path”变量中添加“ window.location.search”，并且所有内容也都可以在“ search”页面中开始工作。 但是100％工作版本也需要一些js逻辑，因为我注意到，如果您的网址是“ http：//example.com/en/？”

Internet Explorer将返回“？” 来自“ window.location.search”。 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 = '?';
}

此svg遮罩开始正常工作后。 （作为旁注，我关闭了html5mode。）

Answer 3

这是修复程序（在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

旧答案：

解决方案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

旧答案：

解决方案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