JavaScript별로 SVG 그래픽의 크기를 얻습니다

StackOverflow https://stackoverflow.com/questions/231679

  •  04-07-2019
  •  | 
  •  

문제

HTML 페이지에 SVG 그래픽을 추가하려면 객체 태그를 사용하여 다음과 같이 랩핑하는 것이 일반적입니다.

<object id="svgid" data="mysvg.svg" type="image/svg+xml" 
  wmode="transparent" width="100" height="100">

this browser is not able to show SVG: <a linkindex="3"
href="http://getfirefox.com">http://getfirefox.com</a> 
is free and does it!
If you use Internet Explorer, you can also get a plugin: 
<a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html">
http://www.adobe.com/svg/viewer/install/main.html</a>

</object>

객체 태그에서 너비와 높이 속성을 사용하지 않으면 SVG가 전체 크기로 표시됩니다. 일반적으로 테스트를 위해 Open Graphics Library에서 SVG 파일을 얻습니다. JavaScript를 사용하여 SVG 크기를 얻는 방법이 있습니까? 아니면 상단 SVG 태그에서 크기를 찾으려면 SVG XML 파일을 살펴보아야할까요?

올바른 솔루션이 없습니다

다른 팁

보다 http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2

SVG 파일이 동일한 도메인에있는 한 HTML에 의해 참조 된 SVG DOM에 액세스 할 수 있습니다 (그렇지 않으면 보안 취약점이됩니다. 객체 태그가 id = "myObj"가있는 경우 :

var obj = document.getElementById("myobj"); // reference to the object tag
var svgdoc = obj.contentDocument; // reference to the SVG document
var svgelem = svgdoc.documentElement; // reference to the SVG element

그런 다음 SVG 요소의 너비/높이에 액세스 할 수 있습니다.

svgelem.getAttribute("width")
svgelem.getAttribute("height")

이러한 속성은 "100px", "300", "200em", "40mm", "100%"와 같은 것일 수 있으므로 신중하게 구문 분석해야합니다.

> JavaScript를 사용하여 SVG 크기를 얻는 방법이 있습니까?

아니요.

아니:

JavaScript는 브라우저에 앉아있는 SVG 파일 내용에 액세스 할 수 없습니다.

따라서 임의의 SVG 이미지가 포함 된 페이지를 포함한 다음 JavaScript가 SVG 파일 자체에서 무엇을 결정하도록 할 수는 없습니다.

Page의 DOM : 원래 마크 업 및 DOM에 대한 JS 관련 수정에 포함 된 유일한 데이터 JS에 액세스 할 수 있습니다. 당신은 액세스 할 수 있습니다 object 요소의 속성과 후손 노드이지만 페이지 마크 업을 직접 볼 때 볼 수있는 것보다 더 가시성을 제공하지는 않습니다.

예:

JS (최신 브라우저)는 XML 문자열을 DOM으로 구문 분석 한 다음 DOM 기반 방법을 사용하여 컨텐츠에 액세스 할 수 있습니다.

XMLHTTPREQUEST 스타일 요청을 발행하여 SVG 파일 내용을 얻을 수 있습니다 (예 : JS는 SVG 파일의 URL에서 HTTP GET를 수행합니다). 그런 다음 JS는 SVG 파일의 전체 XML 문자열을 갖고 원하는 내용에 액세스 할 수 있습니다.

> 아니면 상단 SVG 태그에서 크기를 찾으려면 SVG XML 파일을 살펴보아야합니까?

이것은 지금까지 더 실현 가능할 것입니다.

유일한 JS 기반 솔루션은 JS가 SVG 파일의 URL (위와 같이)에서 GET 요청을 수행해야합니다. JS의 DOM으로의 XML은 너무 자원 집약적 일 수 있습니다.

JS가 SVG의 XML 컨텐츠를 검색하고 DOM으로 구문 분석하여 이미지 크기 만 검색하는 것은 약간 과잉입니다. 완벽하게 가능하지만 일반적으로 실용적이지 않습니다.

SVG의 XML 컨텐츠 서버 측면을 쿼리하고 적절한 너비와 높이를 결정한 다음 동적으로 추가합니다. width 그리고 height 마크 업을 브라우저로 반환하기 전에 속성이 가장 좋습니다.

ES6: 사용 async/await 순서와 같은 방식 으로이 작업을 수행 할 수 있습니다

async function getImage(url) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

위의 기능 사용 :

let img = await getImage("yourimage.svg");
let w = img.width;
let h = img.height;

SVG 파일이 동일한 도메인에있는 한 사용할 수 있습니다 (세부 사항 여기).

JavaScript를 사용하여 SVG 크기를 얻는 방법이 있습니까?

예

var filesize = function(url, requestHandler) {
  var requestObj = new XMLHttpRequest();  
  requestObj.open('head', address, true);  
  requestObj.onreadystatechange = callback;
  requestObj.send(null);  
};

이제 처리 기능 :

var requestHandler = function(result) {
    if (this.readyState === 1) {
        this.abort();
    }
    return this.getResponseHeader("Content-length");
};

var size = fileSize("http://whatever.org/someSVGFile.svg", requestHandler);
alert(size);

SVG 또는 다른 파일의 파일 크기를 히치없이 반환해야합니다. 서버 구성은 방해 할 수있는 유일한 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top