JS 脚本遍历数千个 SVG 路径元素,比较名称、id 并有条件地更改它们的值

问题描述 投票:0回答:0

我有一个包含超过 5000 个元素的 SVG 文件,元素带有名称和非连续的 ID,我需要每个 ID 都与每个路径的名称相同,因为它们代表县和其他地区,并且也希望具有相同的名称displayName() 中的字符串

下面的代码是对元素及其当前所具有内容的简化。

我试过手动更改这些值,但它不实用,尤其是有数千个,这需要我几周的时间。

onmouseover 是 SVG 文件的一部分,它既会用颜色突出显示区域,也会自动显示区域名称,使用 HTML 标签效果很好,但我真正的问题如下:

<path
style="font-size:12px;fill:#d0d0d0"
d="M 442.19,458.85 442.46,458.98 442.7 [.......] "
id="35512"
name="Atlanta, GA "
class="stateA countyB"
onmouseover="displayName('')" />

我需要的是:

<path
style="font-size:12px;fill:#d0d0d0"
d="M 442.19,458.85 442.46,458.98 442.7 [.......] "
id="Atlanta, GA"
name="Atlanta, GA"
class="stateA countyB"
onmouseover="displayName('Atlanta, GA')" />

我已经尝试了一些基本的 Jquerry 和 Javascript 代码,但问题在于元素的绝对数量以及如何在不弄乱顺序的情况下更改每个元素,例如,如果我使用数组。 Id 不是顺序的,我认为必须逐步完成

我找不到一种方法来获取一个元素的内容,与另一个元素的内容进行比较,更改它们的值,将相同的值递增到 onmousehover 并移动到下一个元素,getById 需要我知道或使用数组这仍然会把谁是谁弄得一团糟,所以我不太确定

我相信算法会遵循这些思路?

//document.querySelectorAll("path").forEach(function(item)???
if(Id != Name)
{
  id = name
  onmouseover="displayname('"+Name+"')"
}
javascript svg interactive
© www.soinside.com 2019 - 2024. All rights reserved.