如何使用正则表达式按类获取svg元素

How to get svg elements by class using regular expressions

本文关键字：获取 svg 元素 何使用 正则表达式      更新时间：2023-09-26

我正试图用svg制作一个交互式图，其中边有路径，节点有圆。为了找到节点的子节点，我希望能够使用特定的正则表达式在边缘搜索id，因为id的形式都是："node1_id node2_id"。我尝试了很多解决方案，包括美元-美元表示法和按id将regex直接放入find元素中，但我运气不佳。我找不到任何其他答案，而且我对前端交易还很陌生，所以我不确定这是否是svg特有的东西。

$$('path[id^="'b10020 (['d]+)"')
Error: SYNTAX_ERR: DOM Exception 12
document.getElementById("'b10020 (['d]+)")
null

这可能是我做过的最明智的两次尝试。在这种情况下node1_ id为10020的所有边。

<path fill="none" stroke-width="1.0"
              d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
              id="10020 12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

作为一个例子，这样的优势本应返回一场比赛。

如果我这样做，我会将标记更改为：

<path fill="none" stroke-width="1.0"
      d="M -1026.321777,958.875610 C -987.123413,912.258789 -858.400574,901.130981 -811.783752,940.329346"
      data-node-1="10020" data-node-2="12050" stroke-opacity="1.0" stroke="#7dcb3c"/>

然后使用"一美元符号"（又名jQuery）：

$('path[data-node-1="10020"]')

没有接受正则表达式的CSS选择器，即使在下一个4级版本中也是如此。[foo^=bar]表示"其foo属性值恰好以字符串bar开头的元素"。你可以做几件事：

  • 如果只需要ID以10020开头的节点，则可以使用$$("path[id^='10020 ']")，但这将接受不继续使用其他数字的ID
  • 如果希望10020值显示在ID中，而不考虑位置，则使用path[id~='10020']选择器
  • 如果你真的需要使用正则表达式，那么你必须自己遍历树，只过滤你感兴趣的元素；您可以根据上面的一个选择器通过预筛选来优化一点，这样您就只需要检查以10020开头的元素

但是，您的用例有一个大问题：ID可能不包含空格，这是一个无效的SVG文档。你真的必须使用id之外的另一个属性，也许class更适合你，或者如果这些数字有语义含义，那么定义你自己的名称空间，并在该名称空间中使用新的属性。

如果您使用class，那么您的选择器也可以变得更简单：$$("path.10020")

相关文章：