首页 > 解决方案 > 使用 svg.js 将元素添加到现有组

问题描述

我有一个加载的 svg 地图,然后我创建了一些我想添加到一组加载的 SVG 中的路径,但我不能。

在这里我加载我的地​​图

var mapa = SVG('map').size('100%', '100%');

var mapLoad = new XMLHttpRequest();
mapLoad.open('GET', 'img/my_map.svg', true);
mapLoad.send();
mapLoad.onload = function(e) {
  mapa.svg(mapLoad.responseText);
}

然后我在 SVG 中创建了一些路径

var plane = mapa.path('...');

这是实际的结果

这就是我得到的结果

我想要的是在“#content”组中添加所有这些路径

标签: javascriptsvgsvg.js

解决方案


您的新 mapa 是标记中的一个元素,而不是根元素,因此在创建新内容时只需使用该元素。

var mapa = SVG('map').size('100%', '100%');

var mapLoad = new XMLHttpRequest();
mapLoad.open('GET', 'img/my_map.svg', true);
mapLoad.send();
mapLoad.onload = function(e) {
  mapa.svg(mapLoad.responseText);
  mapa = SVG.get('mapa');
  var plane = mapa.path('...');
}

推荐阅读