динамический текст SVG не отображается на экране - PullRequest
0 голосов
/ 03 февраля 2019

Я знаю, что уже задавалось несколько похожих вопросов, к сожалению, никто не решил мою проблему.Я добавляю текстовый элемент svg в контейнер ag, исходный код показывает, что он добавлен правильно, но текст не отображается.

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>

изменение положения текстового элемента не дало никаких результатов, поэтому текст не должен быть за кадром.

Помощь оценена, спасибо заранее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...