个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是我的代码
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 回答后。我解决了这个问题，从一个空白页面开始，然后从我的非工作页面导入所有元素。 header 中的基本标记似乎阻止它在 FF 和 Chrome 下工作。这对我来说看起来很疯狂，因为除了掩码之外的其他一切都有效，所以这不是脚本路径问题。
<base href="http://127.0.0.1/mySiteDev/">
最佳答案
是的，正如 @Robert Longson 评论的那样, masks 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>关于javascript - 当 header 中有 <base> 标记时，为什么 snapsvg mask 在 Chrome 和 Firefox 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25999037/
25
4
0
如果我不定义自己的构造函数，Base *b = new Base; 与 Base *b = new Base(); 之间有什么区别吗？ 最佳答案 初始化是标准中要遵循的一种 PITA...然而，这两个
是否有现成的函数可以在 C# 中进行基本转换？我希望将以 26 为基数和以 27 为基数的数字转换为以 10 为基数。我可以在纸上完成，但我不是一个非常有经验的程序员，如果可能的话，我宁愿不要从头开始
JNA 中'base'是什么意思 Pointer.getPointerArray(long base) Pointer.getStringArray(long base) ? JNA Document
我正在做一个将数字从 10 进制转换为 2 进制的基本程序。我得到了这段代码: #include #include #include #include using namespace std;
“假设以下代码: public class MultiplasHerancas { static GrandFather grandFather = new GrandFather();
当我分析算法的时候，我突然问自己这个问题，如果我们有三元计算机时间复杂度会更便宜吗？还是有任何基础可以让我们构建计算机，这样时间复杂度分析就无关紧要了？我在互联网上找不到太多，但是基于三元的计算机在给
一个简化的场景。三个类，GrandParent，Parent 和 Child。我想要做的是利用 GrandParent 和 Parent 构造函数来初始化一个 Child 实例。 class Gran
我编写了一个简单的函数来将基数为 10 的数字转换为二进制数。我编写的函数是我使用我所知道的简单工具的最佳尝试。我已经在这个网站上查找了如何执行此操作的其他方法，但我还不太了解它。我确定我编写的函数非
我尝试了以下代码将数字从 base-10 转换为另一个 base。如果目标基地中没有零(0)，它就会工作。检查 79 和 3 并正确打印正确的 2221。现在尝试数字 19 和 3，结果将是 21 而
这个问题在这里已经有了答案: Is Big O(logn) log base e? (7 个答案) 关闭 8 年前。 Intro 练习 4.4.6 的大多数解决方案。算法第三版说，n*log3(n)
如何判断基类(B)的指针是否(多态)重写了基类的某个虚函数？ class B{ public: int aField=0; virtual void f(){}; }; class C
我测试了这样的代码: class A { public A() { } public virtual void Test () { Console.WriteL
两者都采用相同的概念:定义一些行和列并将内容添加到特定位置。但是 Grid 是最常见的 WPF 布局容器，而 html 中基于表格的布局是 very controversial .那么，为什么 WPF
我试图在 JS 中“获得”继承。我刚刚发现了一种基本上可以将所有属性从一个对象复制到另一个对象的简洁方法: function Person(name){ this.name="Mr or Miss
class A { public override int GetHashCode() { return 1; } } class B : A { pu
我有一个 Base32 信息哈希。例如IXE2K3JMCPUZWTW3YQZZOIB5XD6KZIEQ ，我需要将其转换为base16。 我怎样才能用 PHP 做到这一点？ 我的代码如下所示: $ha
我已经使用其实验界面对 Google Analytics 进行了一些实验，一切似乎都运行良好，但我无法找到 Google Analytics 属性如何达到变体目标的答案，即归因 session - 基
if (state is NoteInitial || state is NewNote) return ListView.builder(
MSVC、Clang 和 GCC 不同意此代码: struct Base { int x; }; struct Der1 : public Base {}; struct Der2 : public
我已经尝试构建一个 Base 10 到 Base 2 转换器... var baseTen = window.prompt("Put a number from Base 10 to conver
我是一名优秀的程序员,十分优秀！