外部加载的 svg 文件元素的 ID

Question

我已将 svg 文件加载到“g”中（画布基于 Snap-svg）：

var _i = new Image();
_i.src = 'svgFile.svg';
$(_i).load(function () {
    Snap.load(src, function(f){
    _imagen = canvas.g(f.select('*'));
    canvas.append(_imagen);
    });

svg 文件 (svgFile.svg) 包含（除其他外）：

<path id="letterN" fill="#FCEA0D" stroke="#000000" stroke-miterlimit="10" d="M606,538 ... z"/>

外部文件附加良好，我可以在页面中看到它。但是当我在控制台中查找元素（路径）时，我看到它有 id = "Shyphnh2b1fg"。这发生在文件中的所有 svg 元素上。为什么id变了？更重要的是，如何避免？任何帮助将不胜感激！

Answer 1

这实际上不是 SVG id，所以我怀疑你看错了。

Snap 添加自己的 id，如果您查看 Chrome 控制台日志之类的内容，然后执行 console.log( someElement )，您会看到该对象将有一个 id，但底层 SVG 元素（可通过 someElement 访问） .attr 或 someElement.node)，然后将显示实​​际的 SVG，单击“属性”，您将看到“id”在那里有原始文件。

所以基本上，您查看的是 Snap 实例 ID，而不是 svg 元素 ID，它们是独立的东西。以下应该会有所帮助

console.log( el );
console.log( el.id ); // snap id, don't often need to use this
console.log( el.attr('id') ); // use this normally, snap access to underlying svg id
console.log( el.node.attributes.id.value ); // actual reference to svg id, should be the same as attr('id')