使用 setAttribute 在 Raphael 中设置双边框
Setting double borders in Raphael with `setAttribute`
在这个 jsFiddle 中,我有两个 SVG 矩形。第一个在 SVG 标签内,第二个用 Raphael JS 渲染。两个 rect 应该与双边框相同,但它们不是。在 Raphael JS 中使用 node.setAttribute
应该设置低级 SVG 属性,所以这应该有效。这里缺少什么?
<svg height="100" width="100">
<rect class="rect2" height="50" width="50" x='25' y='25' />
</svg>
<div id="the_canvas"></div>
.rect2 {
fill: none;
outline: 2px double black;
outline-offset: 0;
}
var w = 100, h = 100;
var paper = Raphael("the_canvas", w, h);
var rect = paper.rect(25,25,50,50);
rect.node.setAttribute('fill', 'none');
rect.node.setAttribute('outline','2px double black');
rect.node.setAttribute('outline-offset', 0);
这不是 Raphael 问题,而是 SVG 的工作方式。
outline 和 outline-offset 不是映射的 SVG 属性。 IE。它们不映射到 CSS 属性。事实上,这些 CSS 属性都不应该在 SVG 中真正做任何事情(它们在 SVG 规范中没有提到)。
浏览器的存在主要是为了呈现 HTML,有时本应在 HTML 中有效的内容在 SVG 中无效时却渗入了 SVG。
在这个 jsFiddle 中,我有两个 SVG 矩形。第一个在 SVG 标签内,第二个用 Raphael JS 渲染。两个 rect 应该与双边框相同,但它们不是。在 Raphael JS 中使用 node.setAttribute
应该设置低级 SVG 属性,所以这应该有效。这里缺少什么?
<svg height="100" width="100">
<rect class="rect2" height="50" width="50" x='25' y='25' />
</svg>
<div id="the_canvas"></div>
.rect2 {
fill: none;
outline: 2px double black;
outline-offset: 0;
}
var w = 100, h = 100;
var paper = Raphael("the_canvas", w, h);
var rect = paper.rect(25,25,50,50);
rect.node.setAttribute('fill', 'none');
rect.node.setAttribute('outline','2px double black');
rect.node.setAttribute('outline-offset', 0);
这不是 Raphael 问题,而是 SVG 的工作方式。
outline 和 outline-offset 不是映射的 SVG 属性。 IE。它们不映射到 CSS 属性。事实上,这些 CSS 属性都不应该在 SVG 中真正做任何事情(它们在 SVG 规范中没有提到)。
浏览器的存在主要是为了呈现 HTML,有时本应在 HTML 中有效的内容在 SVG 中无效时却渗入了 SVG。