Scala.js：选择和操作生成的 SVG
Scala.js: Selecting and manipulating generated SVG
我正在为一些看似简单的事情而苦苦挣扎。
使用 Scaja.JS，我使用 ScalaTags 库生成了一些 SVG。
我现在希望使用事件来操作 SVG 元素：
circ.onclick = { e: dom.MouseEvent => ... }
具体来说，我想 select 某个 class 的所有元素，然后切换它们的一些 class 属性。
我尝试了 Scala.js JQuery 绑定。虽然我可以用它检索 selections，但我无法操作 selected 元素（设置 classes 等）。这似乎是 SVG 的一个基本问题，它是一种不同的 DOM，不能用 JQuery.
来操作。
接下来，我尝试了低级别DOMAPI。这让我得到 selection:
document.body.getElementsByClassName("myClass").foreach { node => ... }
我现在很难操纵 node 的属性。我可以访问它们，但我无法设置它们，因为 node.attributes.setNamedItem(...) 需要一个 raw.Attr 参数，但我无法创建它，没有构造函数来设置 Attr 的 name。
另外，去低级API也很不方便。我更愿意得到一些 class 的 selection 更容易操作，例如Element.
有什么想法吗？
javascript DOM api 中也没有 Attr 的构造函数。尝试在 javascript 中计算 new Attr() 将导致 "Illegal constructor" TypeError。但是，您可以使用 document.createAttribute(name: String).
创建属性
尽管 getElementsByClassName 返回的是一个 NodeList，但每个项目实际上都是一个元素（您必须使用模式匹配或类似方法对其进行向下转换）。从 dom.Element 您可以调用 setAttribute(name: String, value: String)，这可能比在如此低的级别手动创建 Attr 更方便。
此外，jQuery 使用表达式 select 的 dom 元素的能力现在大部分已内置到使用 document.querySelectorAll 的 DOM 中。您可以尝试 svgDocument.querySelectorAll(".foo").map(_.asInstanceOf[dom.raw.SVGElement])
.foreach { _.setAttribute("someAttribute", "newValue") }.
当然 - 将 NodeList 视为 Scala 集合将需要 import org.scalajs.dom.ext._ 将隐含函数引入范围，但看起来您已经在这样做了。
我正在为一些看似简单的事情而苦苦挣扎。
使用 Scaja.JS，我使用 ScalaTags 库生成了一些 SVG。
我现在希望使用事件来操作 SVG 元素：
circ.onclick = { e: dom.MouseEvent => ... }
具体来说，我想 select 某个 class 的所有元素，然后切换它们的一些 class 属性。
我尝试了 Scala.js JQuery 绑定。虽然我可以用它检索 selections，但我无法操作 selected 元素（设置 classes 等）。这似乎是 SVG 的一个基本问题，它是一种不同的 DOM，不能用 JQuery.
来操作。接下来，我尝试了低级别DOMAPI。这让我得到 selection:
document.body.getElementsByClassName("myClass").foreach { node => ... }
我现在很难操纵 node 的属性。我可以访问它们，但我无法设置它们，因为 node.attributes.setNamedItem(...) 需要一个 raw.Attr 参数，但我无法创建它，没有构造函数来设置 Attr 的 name。
另外，去低级API也很不方便。我更愿意得到一些 class 的 selection 更容易操作，例如Element.
有什么想法吗？
javascript DOM api 中也没有 Attr 的构造函数。尝试在 javascript 中计算 new Attr() 将导致 "Illegal constructor" TypeError。但是，您可以使用 document.createAttribute(name: String).
尽管 getElementsByClassName 返回的是一个 NodeList，但每个项目实际上都是一个元素（您必须使用模式匹配或类似方法对其进行向下转换）。从 dom.Element 您可以调用 setAttribute(name: String, value: String)，这可能比在如此低的级别手动创建 Attr 更方便。
此外，jQuery 使用表达式 select 的 dom 元素的能力现在大部分已内置到使用 document.querySelectorAll 的 DOM 中。您可以尝试 svgDocument.querySelectorAll(".foo").map(_.asInstanceOf[dom.raw.SVGElement])
.foreach { _.setAttribute("someAttribute", "newValue") }.
当然 - 将 NodeList 视为 Scala 集合将需要 import org.scalajs.dom.ext._ 将隐含函数引入范围，但看起来您已经在这样做了。