如何使用 Snap.svg 更改文本元素内容答案

【问题标题】：How to change text element content using Snap.svg如何使用 Snap.svg 更改文本元素内容
【发布时间】：2017-04-14 03:00:57
【问题描述】：

我正在尝试更改 SVG 中文本元素的内容。这样做的目的是动态更新将显示为文本元素的对象的模式。

我将文本元素包裹在一个元素中，如下所示：

<g id="CarAMode">
   <text transform="matrix(1 0 0 1 177.17 133.6)" class="st2">PASSENGER</text>
</g>

然后我在加载时在 JS 中加载 SVG：

var hoistShaft = Snap('#HoistShaft');

Snap.load( "/svg/Hoistway.svg", function(f) {
   hoistShaft.append(f);
   var carMode = hoistShaft.select('#CarAMode');

   carMode.attr({       // I thought this is how its done..
      text: 'default'
   });
}

加载我的页面后，我希望“PASSENGER”变为“默认”，但没有发生任何变化。我在控制台中也没有收到任何错误，所以语法似乎是正确的。

关于如何更改文本元素的任何帮助？

【问题讨论】：

您设置了CarAMode 组的text 属性。你不应该为文本元素设置它吗？
@ConnorsFan 我认为更改 SVG 中的任何元素都需要它在一个组中。如果没有，我会做类似var carMode = hoistShaft.select('#idOfTextElement'); 的事情吗？
@ConnorsFan 我刚刚尝试为文本元素分配一个 ID，它成功了！我不知道任何元素的 ID 都可以直接用 Snap 选择。一直以来，我一直认为它必须是组 ID。谢谢！
不客气。由于一个组可以包含多个文本元素，我假设您必须指出要修改哪一个。
Snap 仅使用 css 选择器（在幕后使用 querySelectorAll，因此您可以像使用任何 css 选择器一样使用 select 和 selectAll，按 id、按类或其他方式。

标签： javascript svg snap.svg

【解决方案1】：

给定 svg 代码，如 cmets 所述，您可以使用常见的 CSS 选择查询进行选择：
hoistShaft.select('#CarAMode text'); 要么 hoistShaft.select('#CarAMode').select('text');

【讨论】：