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

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 参数，我无法创建它，没有构造函数来设置Attr 的name。

另外，使用低级 API 非常不方便。我更喜欢选择一些更容易操作的类，例如Element.

有什么想法吗？

Answer 1

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

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

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

当然 - 将 NodeList 视为 Scala 集合将需要 import org.scalajs.dom.ext._ 将隐式带入范围，但看起来您已经在这样做了。