숨겨진 SVG GetBBox

Question

지금이 문제를 하루 이상 해결하려고하고 있지만 답변을 찾을 수 없습니다. 내 문제는 내가 SVG 이미지 (반응 형 디자인)를 확장해야한다는 것이다. 클라이언트 측에서 SVG 코드를 조작해야하므로 img 태그를 통해 SVG 코드를 임베드하는 것은 옵션이 아닙니다. 그래서 대신 인라인 이미지를 사용하려고했습니다. 그러나 적절하게 크기를 조정하려면 viewBox 속성을 설정해야합니다. SVG 파일은 자체의 경계 상자를 설정할 수없는 일부 소프트웨어에서 생성되므로 내 생각은 자바 스크립트를 사용하는 것이 었습니다.

내 소프트웨어가 수정할 수없는 라이브러리의 다양한 탭 컨트롤을 사용하는 것이 문제입니다. 처음에는 렌더링되지 않기 때문에 바운딩 박스를 가져올 수 없습니다. 따라서 Chrome에서 0을 다시 얻거나 Firefox에서 오류 메시지를 반환합니다.

필요한 것은 실제로 객체를 렌더링하지 않고 경계 상자의 크기를 가져 오는 방법입니다. 라이브러리가 탭을 표시하거나 숨기는 데 사용하는 표시 매개 변수를 조작 할 수 없습니다.

아이디어가 있으십니까?

하나의 아이디어는 SVG를 다른 가시적 인 div로 복사하는 것이지만 문제를 해결할 수 있는지는 알 수 없습니다. 그리고 나는 그것을 어떻게하는지 모른다.

안부

Answer 1

당신이 다음 getBBox을 보이는 SVG로 복제 할 수 있습니다.

당신에 추가하기 HTML :

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

자바 스크립트에 추가

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

이전 응답에 따라, 나는 getBBox을 monkeypatched 내 애플 리케이션 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; 
    } 
};