Estoy tratando de modificar un SVG elementos viewbox en JavaScript. Básicamente, estoy dibujando un árbol de búsqueda binario, y cuando se pone demasiado amplia, quiero alterar el viewbox para alejar la imagen, así que el árbol se ajusta en la ventana. Actualmente estoy usando:

if(SVGWidth>=1000){
  var a = document.getElementById('svgArea');
  a.setAttribute("viewbox","0 0 " + SVGWidth + " 300");
}

El HTML es:

<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">

También he intentado usar setAttributeNS(‘null’,…), pero que no parecen trabajar bien. Una cosa extraña que he notado es que cuando me despierto(a) se le da [objeto SVGSVGElement] que parece extraño. Cualquier ayuda es muy apreciada.

  • puede saber por qué usted no desea utilizar las bibliotecas?
  • Yo debería haber añadido, SVGWidth es probablemente un mal nombre de la variable, debe ser sólo treeWidth. También, el código html, SVG es: <svg id=»svgArea» xmlns=»w3.org/2000/svg» xmlns:xlink=»w3.org/1999/xlink» width=»1000″ height=»300″ viewBox=»0 0 1000 300″>
  • Yo no estoy usando las bibliotecas porque me estoy centrando en el aprendizaje de JavaScript. Mi próximo proyecto, voy a añadir en las bibliotecas, pero pensé que sería mejor comenzar con los nativos de JavaScript.
  • Probablemente el uso de una biblioteca de lograr esto sería frustrante, ya que se debe trabajar y dado que únicamente el límite de la OP general de comprensión de la manipulación del árbol DOM (y por lo tanto estarían a merced de la biblioteca). Mientras no deberíamos esperar a entender las cosas a la asamblea nivel, siempre es útil para entender cómo algo que ya están trabajando dentro de los que realmente funciona, en lugar de confiar en las bibliotecas.
InformationsquelleAutor Andrew Clear | 2012-04-10

2 Comentarios

  1. 65

    Sería bueno ver el contexto de la svg, pero el siguiente trabajado para mí, con una pura documento SVG:

    shape = document.getElementsByTagName("svg")[0];
    shape.setAttribute("viewBox", "-250 -250 500 750"); 

    Tal vez es porque viewBox es sensible a mayúsculas?

    • Caso sensible que era. Suspiro….
    • Mírelo de esta manera, si no hubiera sido tan fácil, habría sido más difícil. Y nunca he intentado jugar con el real svg atributos del elemento hasta ahora, por lo que ambos descubierto algo.
    • <gritos> he cometido el mismo error.
    • Para la creación dinámica de SVGs, el SVG elemento que tendría que ser creado usando createElementNS o bien ajuste el atributo viewBox no iba a funcionar. Referencia: stackoverflow.com/questions/28734628/…
    • Más precisamente, el DOM SVG objeto tiene sólo viewBox atributo. es no tiene viewbox atributo, aunque escribir viewbox en el HTML
    • Yo creo que esto debería ser setAttributeNs(null, "viewBox", ...) y que setAttribute que sucede para trabajar, pero no pueden trabajar en el futuro. Por favor me corrija si me equivoco, ya que no estoy 100% seguro de esto.
    • Creo que estás en lo correcto. Me dijo que como mucho a mí mismo en otra respuesta: stackoverflow.com/questions/10546135/…

  2. 8

    Usted tiene un error en su código: «viewbox» es distinto a «viewBox»…B está en mayúsculas. Cambie el código para:

    a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");
    • Bueno, yo creo que la forma en que ahora la respuesta es no responder a la pregunta. El ‘b’ fue la razón por la que no funcionó. Sin embargo, user3434597 debería haber leído @Anthony mayor respuesta en primer lugar. Tal vez él va a quitar este.

Dejar respuesta

Please enter your comment!
Please enter your name here