我正在努力解决一些看似简单的事情。
使用 Scaja.JS,我通过 ScalaTags 库生成了一些 SVG。
我现在希望使用事件操作 SVG 元素:
circ.onclick = { e: dom.MouseEvent => ... }
具体来说,我想选择某个类的所有元素,然后在它们上切换一些类属性。
我尝试了 Scala.js JQuery 绑定(bind)。虽然我可以用它检索选择,但我无法操作所选元素(设置类等)。这似乎是 SVG 作为一种不同类型的 DOM 的一个根本问题,无法使用 JQuery 进行操作。
接下来,我尝试了低级 DOM API。这让我做出选择:
document.body.getElementsByClassName("myClass").foreach { node => ... }
我现在很难操作节点
的属性。我可以访问它们,但无法设置它们,因为 node.attributes.setNamedItem(...)
需要一个 raw.Attr
参数,但我在创建时遇到了麻烦,没有构造函数来设置 Attr
的 name
。
此外,使用低级 API 非常不方便。我更愿意选择一些更容易操作的类,例如元素
。
有什么想法吗?
最佳答案
JavaScript DOM api 中也没有 Attr
的构造函数。尝试在 JavaScript 中计算 new Attr()
将导致“非法构造函数”类型错误。但是,您可以使用 document.createAttribute(name: String)
创建属性。
尽管 getElementsByClassName
返回一个 NodeList,但每个项目实际上都是一个 Element(您必须使用模式匹配或类似方法对其进行向下转换)。从 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._
将隐式引入范围,但看起来您已经在这样做了那个。
关于jquery - Scala.js:选择和操作生成的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30647361/