GetBBox SVG при скрытии

Question

Я пытаюсь решить эту проблему уже более одного дня, но я не могу найти ответ. Моя проблема в том, что мне нужно масштабировать изображение SVG (отзывчивый дизайн). Мне нужно манипулировать SVG-кодом на стороне клиента, поэтому встраивание его через тег img не является вариантом. Поэтому я попытался использовать встроенное изображение. Однако, чтобы масштабировать его должным образом, мне кажется, что мне нужно установить свойство viewBox. SVG-файлы создаются с помощью некоторого программного обеспечения, которое не может установить ограничительную рамку на своем собственном уровне, поэтому моя идея заключалась в том, чтобы использовать JavaScript для этой цели.

Проблема в том, что мое программное обеспечение использует различные элементы управления вкладками из библиотеки, которую я не могу изменить. Я не могу просто получить ограничительную рамку, потому что она не отображается первоначально, и поэтому я просто возвращаю нули (в Chrome) или сообщения об ошибках (в Firefox).

Что мне нужно - это способ получить размер ограничивающей рамки без фактического рендеринга объекта. Невозможно управлять параметром отображения, который библиотека использует для отображения и скрытия вкладок.

Любые идеи?

Одна из идей заключалась в том, чтобы скопировать SVG в другой видимый div, но я не знаю, решит ли это проблему. И я не знаю, как это сделать.

С наилучшими пожеланиями

Answer 1

вы можете клонировать его видимым, а затем SVG getBBox.

Добавить в вас HTML:

<div style="position:absolute;left:-9999cm;top:-9999cm;visibility:hidden;"> 
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg"></svg> 
</div> 

Добавить в Ваш JavaScript:

function getBBox(elem){ 
    var svg1 = document.getElementById('svg1'), e = elem.cloneNode(true); 
    e.style.display = "inline"; 
    svg1.appendChild(e); 
    var b = e.getBBox(); 
    svg1.removeChild(e); 
    return b; 
} 

Answer 2

ответ cuixiping как функцию:

function svgBBox (svgEl) { 
    let tempDiv = document.createElement('div') 
    tempDiv.setAttribute('style', "position:absolute; visibility:hidden; width:0; height:0") 
    document.body.appendChild(tempDiv) 
    let tempSvg = document.createElementNS("http://www.w3.org/2000/svg", 'svg') 
    tempDiv.appendChild(tempSvg) 
    let tempEl = svgEl.cloneNode(true) 
    tempSvg.appendChild(tempEl) 
    let bb = tempEl.getBBox() 
    document.body.removeChild(tempDiv) 
    return bb 
} 

Answer 3

На основе предыдущих ответов, я monkeypatched getBBox в моем приложении init, чтобы он прозрачно применял хак.

Теперь я могу позвонить getBBox непосредственно на любой элемент, независимо от того, прикреплен он или нет.

_getBBox = SVGGraphicsElement.prototype.getBBox; 
SVGGraphicsElement.prototype.getBBox = function() { 
    var bbox, tempDiv, tempSvg; 
    if (document.contains(this)) { 
    return _getBBox.apply(this); 
    } else { 
    tempDiv = document.createElement("div"); 
    tempDiv.setAttribute("style", "position:absolute; visibility:hidden; width:0; height:0"); 
    if (this.tagName === "svg") { 
     tempSvg = this.cloneNode(true); 
    } else { 
     tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
     tempSvg.appendChild(this.cloneNode(true)); 
    } 
    tempDiv.appendChild(tempSvg); 
    document.body.appendChild(tempDiv); 
    bbox = _getBBox.apply(tempSvg); 
    document.body.removeChild(tempDiv); 
    return bbox; 
    } 
};