使用 setAttribute 在 Raphael 中设置双边框

Question

在这个jsFiddle 中，我有两个 SVG矩形。 第一个在 SVG 标签中，第二个用 Raphael JS 渲染。 两个矩形都应该与双边框相同，但它们不是。 在 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);

Answer 1

这不是 Raphael 的问题，而是 SVG 的工作方式。

outline 和 outline-offset 不是映射的 SVG 属性。 即它们不映射到 CSS 属性。 事实上，这两个 CSS 属性都不应该在 SVG 中做任何事情（SVG 规范中没有提到它们）。

浏览器的存在主要是为了渲染 HTML，有时只应在 HTML 中工作的东西在它们应该没有效果时渗入到 SVG 中。