使用Bonsai JS样式化SVG元素

Question

Just started using Bonsai JS and can't find anything in the docs so I thought I ask here. 刚开始使用Bonsai JS，在文档中找不到任何内容，所以我想在这里问。 How can I set an elements class attribute so I can define some styles in CSS? 如何设置元素类属性，以便可以在CSS中定义某些样式？ Most of the styles are supported directly in Bonsai but I would also need to change the cursor type on hover over an element. 盆景中直接支持大多数样式，但是我还需要在将鼠标悬停在元素上时更改光标类型。

Answer 1

BonsaiJS doesn't let you set a "class" attribute. BonsaiJS不允许您设置“ class”属性。 Instead you add a listener when the curser hovers over a DisplayObject . 而是在光标悬停在DisplayObject时添加侦听DisplayObject 。

new Rect(150, 150, 150, 150).attr({
  fillColor: "red"
}).addTo(stage).on("mouseover mouseout", function(e) {
  this.attr({
    cursor: e.type == "mouseover" ? "pointer" : "inherit"
  });
});

Open in Orbit: http://orbit.bonsaijs.org/#new%20Rect(150%2C%20150%2C%20150%2C%20150).attr(%7B%0A%20%20fillColor%3A%20%22red%22%0A%7D).addTo(stage).on(%22mouseover%20mouseout%22%2C%20function(e)%20%7B%0A%20%20this.attr(%7B%0A%20%20%20%20cursor%3A%20e.type%20%3D%3D%20%22mouseover%22%20%3F%20%22pointer%22%20%3A%20%22inherit%22%0A%20%20%7D)%3B%0A%7D)%3B%0A%20 在轨道上打开： http : //orbit.bonsaijs.org/#new%20Rect(150%2C%20150%2C%20150%2C%20150).attr(%7B%0A%20%20fillColor%3A%20%22red ％22％0A％7D）.addTo（stage）.on（％22mouseover％20mouseout％22％2C％20function（e）％20％7B％0A％20％20this.attr（％7B％0A％20％20％ 20％20cursor％3A％20e.type％20％3D％3D％20％22mouseover％22％20％3F％20％22pointer％22％20％3 %% A％20％22herit％22％0A％20％20％7D）％3B％0A％7D）％3B％0A％20

使用Bonsai JS样式化SVG元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-08-25 14:34:05

使用Bonsai JS样式化SVG元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-08-25 14:34:05

解决方案1
0 已采纳 2014-08-25 14:34:05