У меня был элемент SVG, который использовался для визуализации линий, соединяющих узлы в потоковой диаграмме.В начале октября 2018 года он внезапно перестал работать в Chrome - элемент SVG имеет 0 ширину и высоту в DOM, хотя для него определены атрибуты ширины и высоты.
После некоторых поисков я недавно обнаружил, что Chromeобновил свои стандарты до SVG 2, однако этот SVG довольно прост, и я не могу понять, какие именно изменения вызвали это.
Подробности:
SVG находится внутри обычного DIV спозиция: относительная.DIV отображается правильно и имеет установленные высоту и ширину.
SVG имеет класс и используется для положения: абсолютный.Кажется, у него больше нет стиля, и я не могу редактировать его через DevTools.Я не уверен, нужно ли для начала иметь стиль.
В SVG есть куча линейных элементов и ничего больше.У линий есть классы, и их стили тоже не работают.
В родительском DIV есть другие элементы DIV (узлы в блок-схеме).Все эти элементы имеют позицию: absolute.
Ни родительский DIV, ни SVG не существуют при открытии страницы.Они создаются с использованием Javascript.
На странице нет других элементов SVG и нигде не используется ключевое слово "use".
Какая часть этого нарушает соответствие SVG 2?
Вот код:
function appendElement(type,className,to,inner){
if (type === 'svg' || type === 'line'){
var el = document.createElementNS("https://www.w3.org/2000/svg", type);
if (className !== undefined) el.setAttribute("class",className);
} else {
var el = document.createElement(type);
if (className !== undefined) el.className = className;
}
to.appendChild(el);
if (inner !== undefined) el.innerHTML = inner;
return el;
}
Функция в классе потоковой диаграммы
setInner(){
this.flowchart.innerHTML = '';
this.svg = appendElement('svg','bw-flowchart-svg',this.flowchart);
this.svg.setAttribute("width", 800);
this.svg.setAttribute("height", 500);
this.currentSize = [800,500];
this.listitems = [];
this.links = [];
for (var i in this.obj.nodes){
this.listitems.push(new BWBFlowchartNode(this,this.obj.nodes[i]));
}
for (var i in this.listitems){
this.listitems[i].createLinks();
}
this.checkSize();
}
Функция createLinks добавляет все строки и устанавливает их значения X и Y.Строки добавляются в DOM правильно.
И стиль, который должен применяться (но ни у svg, ни у линий вообще нет стиля)
.bw-flowchart-svg{
position:absolute;
}
.bw-flowchart-line{
stroke: rgb(0,0,0);
stroke-width: 1;
}