SVG: динамически созданный <use> не будет отображаться
Я динамически создаю серию кругов, используя SVG.
Код создает действительную модель DOM, что вы можете проверить в окне разработчика браузера.
Но круги не отображаются ...
Только после изменения чего-то в svg-коде в DOM в окне разработчика кружки отображаются.
Вот мой код. Надеюсь, это не требует пояснений. Я переработал свой исходный код до самой сути.
(Никаких решений jQuery, пожалуйста.)
HTML:
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>svg</title>
</head>
<body>
<div id = "test"></div>
<script>
TOOLTIPS = [
{ "x": 100, "y": 100 },
{ "x": 200, "y": 200 }
];
(function () {
var obj = document.createElement('object');
obj.type = 'image/svg+xml';
obj.data = 'test.svg';
obj.onload = function () {
TOOLTIPS.forEach(function (index) {
var svgDoc = document.getElementsByTagName('object')[0].contentDocument;
var svgRoot = svgDoc.documentElement;
var group = svgRoot.getElementById('layer1');
var use = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('xlink:href', '#blue');
use.setAttribute('transform', 'translate(' + index.x + ' ' + index.y + ')');
group.appendChild(use);
});
};
document.getElementById('test').appendChild(obj);
})();
</script>
</body>
SVG ('test.svg'):
<svg id = "svgBody" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 1366 768">
<defs>
<circle id = "blue" style = "fill: #00f" cx = "12.5" cy = "12.5" r = "8" />
</defs>
<g id = "layer1"></g>
</svg>
Используйте setAttributeNS для создания элемента xlink: href и убедитесь, что вы указали пространство имен xlink в качестве первого аргумента.
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#blue');Также имейте в виду, что в Chrome contentDocument не будет работать (он всегда будет нулевым), если вы загружаете тестовый файл HTML из локальной файловой системы (например, file://). См .: stackoverflow.com/questions/5333878/…. Если это ваш случай, запустите локальный веб-сервер или используйте Firefox для тестирования.
БЛАГОДАРНОСТЬ! У меня создалось впечатление, что в данном случае setAttributeNS мне не нужен, но, очевидно, я ошибался. @Paul LeBeau, спасибо за предупреждение о contentDocument.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Мне любопытно, почему вы здесь используете
<object>. Почему бы просто не сделать это встроенным в основной HTML-файл?