当标题中有<base />标记时，为什么snapsvg mask在Chrome和Firefox中不起作用？
这是我的代码
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中没有。
有什么问题？
EDIT 用户13500回答后。我解决了问题，从一个空白页面开始，并从我的非工作页面导入所有元素。看来标题中的基本标记阻止它在FF和Chrome下工作。对我来说这看起来很疯狂，因为除了掩码之外的所有其他东西都有效，所以这不是脚本路径问题。
<base href="http://127.0.0.1/mySiteDev/">
3 个答案:
答案 0 :(得分：3)
是的，正如@Robert Longson所评论的那样，掩码网址随基础标记而变化。您可以通过纯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('#Si0fh161e4')使用http://127.0.0.1/mySiteDev/，要更正其必须包含文档。 E.g。
mask="url('the_document.html#Si0fh161e4')"></rect>
或者，有点无用;
<base href="//127.0.0.1/mySiteDev/the_document.html">
<base href="the_document.html">
...
这会破坏可用性
我没有在关于设置网址基础的Snap文档中找到任何内容，但我会进一步了解。
旧答案：
您的代码在这里工作正常。 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>
答案 1 :(得分：1)
我在AngularJS模板中遇到了这个掩码url（）问题，该模板包含类似于此jsfiddle的svg结构。这工作正常，直到我注意到它没有在＆＃34;搜索＆＃34;页。我终于找到了这个Stackoverflow线程，做了一些额外的研究，在我的网站基础标签总是这样的
<base href="/en/search/">
当你在网址＆＃34; http：//example.com/en/search/？q =某事＆＃34;
在我的AngularJS模板中，我必须添加＆＃34; {{path}}＆＃34;在屏蔽网址。 （检查完全svg的小提琴）
<rect x="0" y="0" width="48" height="47" fill="#008FDB" mask="url({{path}}#arrowShape)"></rect>
在我的研究中，我注意到我只需要添加＆＃34; window.location.search＆＃34;在那＆＃34;路径＆＃34;变量和一切也开始在＆＃34;搜索＆＃34;页。但是100％工作版本也需要一些js逻辑，因为我注意到如果你的网址是＆＃34; http：//example.com/en/？＆＃34;
Internet Explorer将返回＆＃34;？＆＃34;来自＆＃34; window.location.search＆＃34;。 Chrome，Safari，Firefox和Opera将仅返回＆＃34;＆＃34;这还不足以让svg面具起作用。
$scope.path = '';
var tmp = $window.location.search;
if(tmp !== "") {
$scope.path = tmp;
}
else if(/\?$/.test($window.location.href)) {
$scope.path = '?';
}
此svg面具开始持续工作。 （作为旁注，我关闭了html5mode。）
答案 2 :(得分：0)
这里有修复（在svg.js和dist文件中）：https://github.com/adobe-webplatform/Snap.svg/issues/325
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
相关问题
- 为什么我的jQuery代码不适用于Firefox和Chrome？
- 音频标签在Firefox和Opera中不起作用
- 当标题中有<base />标记时，为什么snapsvg mask在Chrome和Firefox中不起作用？
- 自动对焦在Firefox上不起作用，在来自其他页面时不起作用
- Styleswitcher并不仅仅对firefox有兴趣。为什么？
- firefox 35.0.1：svg掩码动画不起作用
- 为什么这个img标记代码在Firefox而不是Chrome中有效？
- 动画的svg面具在firefox中不起作用
- element.select（）在Firefox中不起作用
- Ajax在firefox中不起作用
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？