Question

我已将svg文件加载到“g”中，因此（canvas是基于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，点击＆＃39;属性＆＃39;，您将看到＆＃39; id＆＃39;原来那里。

所以基本上，你看的是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')

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

1 个答案: