如何在 JointJS/Backbone 中的多个相同标签元素上设置属性

Question

在 JointJS 中，元素具有 SVG 模板标记，您可以通过在元素上设置属性来动态更改输出的内容。我找不到在同一标签多次出现的标记中选择特定标签的方法。

JointJS 文档包括：

Another important property is attrs which is an object with keys representing selectors that match subelements and values which are SVG attributes that will be set on the subelements.

和

[properties] can be accessed or set directly using the regular Backbone set()/get() methods

所以我不确定我的问题是只涉及 JointJS 还是适用于 Backbone 或更普遍的其他技术。

我的问题:

如果我有标记：

<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>

我可以通过以下方式寻址 image 元素：

element.attr('image', { style: "display: none;" });

不过，我想要两个个图像元素：

<g class="rotatable"><g class="scalable"><rect/></g><image/><image/><text/></g>

现在.attr('image')访问第一个。我找不到访问第二个语法的语法。我试过类似的东西：

<g class="rotatable"><g class="scalable"><rect/></g><image id="img1"/><image id="img2"/><text/></g>

但是element.attr('#img2')好像不行。同样适用于：

<g class="rotatable"><g class="scalable"><rect/></g><image class="img1"/><image class="img2"/><text/></g>

但 element.attr('.img2') 似乎不起作用。

有什么想法吗？

Answer 1

我相信这种行为纯粹是在 JointJS 代码中，而不是 Backbone。尽管文档中提到使用 CSS 选择器来引用元素，但我认为这是必须使用的一些内部简化语法。

您似乎不能像在 CSS 中那样使用 image .class 之类的选择器。它接受标签名称或 class 名称，但不能同时接受两者。所以我给两个 <image> 中的每一个都赋予了自己唯一的 class 名称，并且能够使用 .class1 和 .class2 来寻址每个元素。

如何在 JointJS/Backbone 中的多个相同标签元素上设置属性

How to set attributes on multiple same-tag elements in JointJS/Backbone

javascript

css-selectors

backbone.js

jointjs