Obter tamanho de gráficos SVG por javascript

Question

Para adicionar um gráficos SVG em página html, é comum a tag uso objeto para envolvê-lo como este:

<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>

Se você não usar atributos width e height na tag objeto, o svg será exibido em tamanho real. Normalmente eu recebo arquivos SVG de Open Graphics Library para testar. Existe alguma maneira de obter o tamanho do svg usando JavaScript? Ou talvez eu deveria apenas olhar para o arquivo svg xml para descobrir o tamanho do tag topo SVG?

Answer 1

Consulte http: //dev.opera. com / artigos / view / svg-evolution-não-revolução /? page = 2

É possível ter acesso ao SVG DOM referenciado por um HTML: objeto, desde que o arquivo SVG é no mesmo domínio (caso contrário isso seria uma vulnerabilidade de segurança Se a sua marca de objeto tem id = "myobj" você. faria:

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

Em seguida, você pode obter acesso ao elemento SVG largura / altura por:

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

Note que esses atributos podem ser coisas como "100px", "300", "200em", "40 milímetros", "100%", então você precisa analisá-lo com cuidado.

Answer 2

> Existe alguma maneira de obter o tamanho do svg usando JavaScript?

Não e sim.

Não:

JavaScript não será capaz de acessar o conteúdo do arquivo SVG que estão sentados no navegador.

Por isso, não seria possível ter uma página que contém uma imagem SVG arbitrária e, em seguida, ter o JavaScript determinar qualquer coisa, desde o próprio arquivo SVG.

As únicas JS dados pode acessá-lo que contidos dentro DOM da página: a marcação original acrescido de quaisquer modificações JS-relacionados ao DOM. Você pode acessar atributos do elemento object e nós descendentes, mas que não vai lhe dar visibilidade em nada mais do que o que você pode ver se você olhar para a página de marcação si mesmo.

Sim:

JS (em navegadores modernos) pode analisar qualquer string XML em um DOM e, em seguida, acessar o conteúdo usando métodos baseados em DOM.

Você pode obter o conteúdo do arquivo SVG emitindo um pedido de estilo XMLHttpRequest (ou seja JS realiza um HTTP GET na URL do arquivo SVG). JS teria, então, string XML completo do arquivo SVG e você pode acessar qualquer coisa que você gosta.

> Ou talvez eu deveria apenas olhar para o arquivo svg xml para descobrir o tamanho da tag topo SVG?

Este seria mais viável de longe.

A única solução baseada em JS exigiria JS para executar uma solicitação GET na URL do arquivo SVG (como acima), que é pouco provável que seja viável - cada carregamento de página pode resultar em duplo baixando cada arquivo SVG, e a análise de XML do SVG em um DOM por JS pode ser muito recurso intensivo.

Tendo JS recuperar conteúdo XML do SVG e analisá-lo em um DOM para recuperar apenas as dimensões da imagem é um pouco exagero. É perfeitamente possível, mas geralmente não é prático.

Consultando do lado do servidor de conteúdo XML do SVG, determinando uma largura e uma altura adequada e, em seguida, dinamicamente adicionando a width e atributos height antes de retornar a marcação para o navegador seria sua melhor aposta.

Answer 3

ES6 : Usando async/await você pode fazer isso em seqüência semelhante maneira

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

e uso acima função:

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

Você pode usá-lo, desde que o arquivo SVG é no mesmo domínio (detalhes aqui ).

Answer 4

Existe alguma maneira de obter o tamanho do svg por usando JavaScript?

YES

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

Agora, uma função de manipulação:

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); 

Isso deve retornar o tamanho do arquivo do seu SVG ou qualquer outro arquivo sem problemas. configuração do servidor é a única coisa que possa interferir.