使用 `setAttribute` 在 Raphael 中设置双边框
Posted
技术标签:
【中文标题】使用 `setAttribute` 在 Raphael 中设置双边框【英文标题】:Setting double borders in Raphael with `setAttribute` 【发布时间】:2020-03-26 05:33:42 【问题描述】:在这个jsFiddle 中,我有两个 SVG 矩形。第一个在 SVG 标签内,第二个用 Raphael JS 渲染。两个矩形都应该与双边框相同,但它们不是。在 Raphael JS 中使用 node.setAttribute
应该设置低级 SVG 属性,所以这应该可以工作。这里缺少什么?
<svg >
<rect class="rect2" 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);
【问题讨论】:
【参考方案1】:这不是 Raphael 的问题,这是 SVG 的工作方式。
outline 和 outline-offset 不是映射的 SVG 属性。 IE。它们不映射到 CSS 属性。事实上,这些 CSS 属性都不应该在 SVG 中真正做任何事情(SVG 规范中没有提到它们)。
浏览器的存在主要是为了呈现 html,有时应该只在 HTML 中起作用的东西会在 SVG 中不起作用,而它们在 SVG 中应该不起作用。
【讨论】:
谢谢。你有什么建议在 Raphael 中使用双线边框?只需创建一个额外的矩形? 绘制 2 个大小略有不同的矩形元素,每个元素都有一个笔划。以上是关于使用 `setAttribute` 在 Raphael 中设置双边框的主要内容,如果未能解决你的问题,请参考以下文章
使用 `setAttribute` 在 Raphael 中设置双边框
如何使用 setAttribute 在一个元素上设置多个类?
Laravel中setAttribute和queryScope的用法
在java类中使用getRequest().setAttribute("userFlag", userFlag)赋值,如何在jsp中使用