Obtener gráficos svg tamaño cuando la anchura/altura de atributos en <svg> no se establecen

Así como obtener el tamaño de un archivo SVG con javascript cuando la anchura y la altura no están establecidos en el elemento svg? El svg es una cadena, pero podría hacer un DOM si es necesario.

InformationsquelleAutor Spadar Shut | 2009-12-29

2 Kommentare

  1. 38

    Puede utilizar el getBBox() método de la SVGElement objeto. Se dice que la anchura y la altura, x, y y desplazamiento en píxeles, sin tomar en cuenta la escala del elemento.

    document.getElementById('myelem').getBBox().width  
    document.getElementById('myelem').getBBox().height

    son lo que usted está buscando, creo.

    EDICIÓN:

    1. Recientemente he aprendido también que el poco conocido getBoundingClientRect() funciona igual de bien! Usted también puede hacer: var el = document.getElementById('myelem'); var mywidth = el.getBoundingClientRect().width;

    2. Tenga en cuenta que hay una diferencia entre getBBox y getBoundingClientRect. getBBox obtiene las dimensiones iniciales – getBoundingClientRect también respeta el transformaciones hecho con escala etc.

    • +1 para la edición.
    • getBBox devuelve {[..], width: 0, height: 0} lo hace el getBoundingClientRect. Este último no sólo funcionan en FireFox.
    • No envuelva su elemento con jQuery (como $(yourElement) ), como getBBox no es una función.
    • Usted puede usar jQuery para seleccionar el elemento, sólo tiene que añadir «[0]» después de obtener la no-jQuery elemento de dom… es decir, $(yourElement)[0].getBoundingClientRect().altura
    • jQuery es periféricamente relevantes en el mejor.
  2. -3

    SVGs son escalable de gráficos vectoriales, y por lo tanto puede tener cualquier altura y anchura. Sólo la relación es fija por el formato.

    • Muchas gracias, lo sé, pero en el SVG Viever widget puedo hacer(my.opera.com/SpShut/blog/show.dml/5803641) necesito para visualizar las miniaturas de archivos SVG(decir 100×100), y si un archivo no tiene ni la anchura/altura ni viewBox atributos, que se muestra en tamaño y sólo 100×100 parte de que es visible. Quiero procesar el archivo de alguna manera para obtener las dimensiones y configure la anchura/altura y viewBox atributos.
    • Vas a tener que hacer una suposición acerca de ella. Si tus dedos son 100×100 entonces, ¿por qué no mostrar el SVG en 100×100?
    • Me puse <object class=»miniatura» width=»100px» height=»100px» data=»archivo.svg» /> y si el archivo.svg no tiene ancho&altura&viewBox sólo 100×100 parte si se muestra. Quiero determinar el tamaño de los gráficos, establecer los atributos y volver a copiar el archivo en el disco, por lo que un supuesto de no hacer. Alguna idea de cómo hacer esto?
    • Sin la altura y el ancho establecido en la etiqueta, no es intrínseco tamaño. Usted puede buscar a través de cada elemento en el svg y ver cuál es el más grande de x + ancho y más grande y + altura, y la llamada que el tamaño. No estoy seguro de que usted obtenga las ventajas de que. Conceptualmente, ¿qué estás pensando de como el tamaño si no el valor intrínseco de la altura y la anchura?
    • Gracias, x+ancho & y+altura es una buena variante! Y sí, me refiero a que necesito saber intrínseca de la altura y la anchura. Si me puse los tres atributos, las imágenes siempre se adaptan a las dimensiones de la etiqueta de objeto, en lugar de obtener cortados. Y usted sería tan amable de escribir una especie de if-else algoritmo para calcular el ancho y la altura, porque yo no soy un gran programador y no sería capaz de averiguarlo yo mismo. He encontrado una página que puede ser de ayuda my.opera.com/MacDev_ed/blog/getting-screen-boundingboxes-in-svg Y ¿dónde está el botón para dar las insignias de por aquí?
    • También puede intentar usar un ‘img’ elemento en lugar de «objeto», ya que se generará automáticamente un viewBox para usted mientras usted tiene la «anchura» y «altura» establecer en el archivo svg.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea