Question

https://codepen.io/ffhighwind/pen/BxNKXy

我正在将SVG圈子中的一些按钮转换为画布上的图像。我知道这些图像是有效的，因为当我将它们作为<img>个元素并且直接测试它们时，我已经在页面底部看到了它们。我正在尝试使SVG图像可见并显示在我的SVG圈子当前所在的X，Y坐标处。

图片链接（JS顶部）

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementsByTagName('svg')[0];

var nodes = {
  'A0': { x: 1013, y: 1126, type: 6, links: ['A1', 'N0', 'N7', 'R4', 'H0'] },
  'A1': { x: 920, y: 1130, type: 4, links: ['A0', 'A2'] },
   ...
};

var nodeImages = [
  "http://drive.google.com/uc?export=view&id=1OOiO-LxKoGWniL0j1YNRzbc9IcrZSDk3", //0 Strength
  "http://drive.google.com/uc?export=view&id=1OOiO-LxKoGWniL0j1YNRzbc9IcrZSDk3", //1 Endurance
   ... 
];

图像构造函数（JS中间）

function createImage(src, x, y, w, h) {
  var newElement = document.createElementNS(svgns, 'image');
  newElement.setAttribute('xlink:href', src);
  newElement.setAttribute('width', w);
  newElement.setAttribute('height', h);
  newElement.setAttribute('position', 'relative');
  newElement.setAttribute('top', x);
  newElement.setAttribute('left', y);
  newElement.setAttribute('z-index', 2);
  return newElement;
}

创建图像（JS底部）

//initialize data
try {
  for (var key in nodes) {
    var n = nodes[key];
    n.state = nodeState.unselected;
    var image = createImage(nodeImages[n.type], n.x, n.y, 35, 35);
    image.id = n.id + '_img';
    svg.appendChild(image); // IMAGE IS INVISIBLE??
    ...
    //generate nodes/buttons
    var btn = createButton(key, n.x, n.y, nodeTypes[n.type]); // IMAGES REPLACING THIS
    svg.appendChild(btn); // IMAGES REPLACING THIS

我已尝试使用硬编码坐标代替n.x和n.y的上述代码段。

为什么我的SVG图像不可见？

0 个答案: