javascript - 在拉斐尔中使用`setAttribute`设置双边框(Setting double borders in Raphael with `setAttribute`)

Question

In this jsFiddle I have two SVG rects.

(在这个jsFiddle中，我有两个SVG 矩形 。)

The first one inside an SVG tag, the second one rendered with Raphael JS.

(第一个在SVG标签内，第二个用Raphael JS渲染。)

Both rects should be identical with double borders, but they are not.

(两个矩形均应使用双边框，但不相同。)

Using node.setAttribute in Raphael JS is supposed to set the low level SVG attribute, so this should work.

(node.setAttribute在Raphael JS中使用node.setAttribute来设置低级SVG属性，因此这应该可以工作。)

What's missing here?

(这里缺少什么？)

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

  ask by ps0604 translate from so

Answer 1

This isn't a Raphael issue, it's the way SVG works.

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

outline and outline-offset are not mapped SVG attributes.

(轮廓和轮廓偏移量未映射SVG属性。)

Ie they do not map to CSS properties.

(即，它们不映射到CSS属性。)

In fact neither of these CSS properties should really do anything in SVG (they aren't mentioned in the SVG specification).

(实际上，这两个CSS属性都不应该在SVG中做任何事情（在SVG规范中未提及）。)

Browsers exist mainly to render HTML, sometimes things that should only work in HTML bleed into SVG when they should have no effect there.

(浏览器主要用于渲染HTML，有时它们应该只在HTML中起作用，而在那儿应该没有效果时，它们只能渗入SVG。)