Question

我正在努力寻找看似简单的事情。

使用Scaja.JS，我已经使用ScalaTags库生成了一些SVG。

我现在希望使用事件来操纵SVG元素：

circ.onclick = { e: dom.MouseEvent => ... }

具体来说，我想选择某个类的所有元素，然后在它们上切换一些类属性。

我尝试了Scala.js JQuery绑定。虽然我可以用它检索选择，但我无法操纵所选元素（设置类等）。这似乎是SVG是一种基本问题，它是一种不能用JQuery操纵的不同类型的DOM。

接下来，我尝试了低级DOM API。这让我得到了选择：

document.body.getElementsByClassName("myClass").foreach { node =>  ... }

我现在很难操纵node的属性。我可以访问它们但我无法设置它们，因为node.attributes.setNamedItem(...)需要raw.Attr参数，我无法创建，没有构造函数来设置name的{{1}}。

另外，使用低级API非常不方便。我更喜欢选择一些更易于操作的课程，例如Attr。

有什么想法吗？

Answer 1

javascript DOM api中也没有Attr的构造函数。试图在javascript中评估new Attr()将导致＆＃34;非法构造函数＆＃34;类型错误。但是，您可以使用document.createAttribute(name: String)创建属性。

虽然getElementsByClassName正在返回一个NodeList，但每个项目实际上都是一个元素（你必须使用模式匹配或类似的方式向下转发）。从dom.Element开始，您可以调用setAttribute(name: String, value: String)，这可能比在如此低级别手动创建Attr更方便。

此外，jQuery使用表达式选择dom元素的能力现在主要使用document.querySelectorAll构建到DOM中。您可以尝试使用svgDocument.querySelectorAll(".foo").map(_.asInstanceOf[dom.raw.SVGElement]) .foreach { _.setAttribute("someAttribute", "newValue") }。

当然 - 将NodeList视为Scala集合需要import org.scalajs.dom.ext._将implicits纳入范围，但看起来好像你已经这样做了。

Scala.js：选择并操作生成的SVG

1 个答案: