Question

我知道已经有几个类似的问题，可惜没有一个解决了我的问题。我正在向g容器中添加一个文本svg元素，sourcecod会正确显示其添加内容，但文本不会显示。

var mess = document.createElementNS('http://www.w3.org/2000/svg','g');
  mess.setAttributeNS(null, 'transform', 'translate(100, 0)');
  mess.setAttributeNS(null, 'id', 'message');
var svgbox = document.querySelector('.islandBox');
  svgbox.append(mess);

var bg = document.createElementNS('http://www.w3.org/2000/svg','image');
  bg.setAttributeNS(null, 'width', '1500');
  bg.setAttributeNS(null, 'height', '450');
  bg.setAttributeNS('http://www.w3.org/1999/xlink','href', '/assets/images/messagebg.svg');
var profile = document.createElementNS('http://www.w3.org/2000/svg','image');
  profile.setAttributeNS(null, 'width', '300');
  profile.setAttributeNS(null, 'height', '450');
  profile.setAttributeNS('http://www.w3.org/1999/xlink','href', '/assets/images/profile'+ profileImgId +'.svg');
var text = document.createElementNS('http://www.w3.ord/2000/svg','text');
  text.setAttributeNS(null, 'x', '100');
  text.setAttributeNS(null, 'y', '100');
  text.setAttributeNS(null, 'style', 'font: italic 80px serif; fill: black');
  var t = document.createTextNode(textContent);
  text.appendChild(t);
svgbox = document.querySelector('#message');
  svgbox.append(bg);
  svgbox.append(profile);
  svgbox.append(text);

背景和个人资料图片可以正常工作，只是不显示文本，我是否忽略了任何小错误？生成chrome：

<svg class="islandBox" id="islandBox" viewBox="0, 0, 2000, 1200">
<g transform="translate(100, 0)" id="message">
<image width="1500" height="450" xlink:href="/assets/images/messagebg.svg"></image>
<image width="300" height="450"xlink:href="/assets/images/profile0.svg"></image>
<text x="0" y="100" style="font: italic 80px serif; fill: black">introduction text</text></g></svg>

更改文本元素的位置没有任何结果，因此文本不应在屏幕外。

感谢您的帮助，谢谢。

动态svg文本未显示在屏幕上

0 个答案: