¿Cómo cambiar el argumento de svg <g transform = scale (X)> con JavaScript?

Oye.
Digamos que en algún lugar de mi página tengo gráficos SVG. Hay un grupo al que me gustaría volver a escalar cuando se desencadene algún evento. ¿Cómo puedo hacer eso?
ejemplo de código:¿Cómo cambiar el argumento de svg <g transform = scale (X)> con JavaScript?

<svg onresize="getDivSize(evt)"> 
    <g transform=scale(13)> 
     <rect id="Square" class="chart" 
      width="80" height="20" 
      fill="black" 
      stroke-width="0px" 
      rx="8" ry="8" /> 
     <text id="TextElement" x="13" y="15" fill="green">Text</text> 
    </g> 
</svg>

quiero cambiar (13) argumento de escala, para hacer que lo que debería ser en función de getScreenSize (evt) {...}?
¿O cómo lograr un efecto similar de manera diferente?

edición
En cuanto a la idea general que quiero cambiar el tamaño de gráfico sin especificar valores fijos en cualquier lugar. Así que mis tamaños de divs están basados en porcentajes, ahora solo quiero que mi gráfico se ajuste exactamente a mi div sin importar su tamaño. Es por eso que pensé en JS cambiando el argumento scale() cada vez que se dispara el evento (div resize). La función pondría en escala el cálculo del argumento de DivSize/rectBaseSize (x o y).

Fuente

2011-01-18 yoosiba

Añadir un atributo id a la <g> y luego probar esto:

document.getElementById("id_of_g_element").transform.baseVal.getItem(0).setScale(new_scalex,newscale_y);

o alternativamente:

document.getElementById("id_of_g_element").setAttribute("transform", "scale(" + new_scalex + "," + new_scaley + ")");

Por otra parte, ¿por qué no sólo tiene que utilizar un viewBox tener la svg contenido reescalado automáticamente? ¿O hay restricciones específicas sobre lo que se debe mostrar? También es posible hacer algo de eso con soluciones no basadas en guiones basadas en consultas de medios de CSS3, ver http://www.youtube.com/watch?v=YAK5el8Uvrg (no olvides consultar la descripción para ver los enlaces a los archivos de demostración que se muestran en esa presentación).

Fuente

2011-01-18 08:03:25

no he mirado en negatoscopio sin embargo, como hasta ahora no tengo experiencia de 4 horas con SVG nad JS: P De todos modos lo busco y CSS también - thx for link. – yoosiba

cómo agregar la identificación a dinámicamente ?? –

@AbinayaSelvaraju, por ejemplo, 'yourElement.id =" foo ";' o 'yourElement.setAttribute (" id "," foo ");'. –

Si 'sólo' quiere una SVG a escala con el tamaño de un DIV, se puede hacer eso con CSS

#stretched-image { 
    margin: 0; 
    position:fixed; 
    top:0; left:0; right:0; bottom:0; 
    height:100%; 
    background-size:cover; 
    display: block; 
    background-position:50% 50%; 
    background-image: url(../img/pic.svg); 
}

Fuente

2013-05-19 04:36:01 Tvog

¿Cómo cambiar el argumento de svg <g transform = scale (X)> con JavaScript?

Respuesta

Cuestiones relacionadas