Comment changer argument de svg <g transformer=scale(X)> avec le JavaScript?

Hé.
Disons que quelque part sur ma page j'ai SVG graphiques. Il y a un groupe que je tiens à re-scale lorsqu'un événement est déclenché. Comment dois-je faire?
exemple de code:

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

Je veux changer d'échelle(13) argument, à faire que ce qui devrait être dans fonction getScreenSize(evt) {...}?
Ou comment obtenir le même effet de manière différente?

modifier
Comme pour l'idée générale que je veux redimensionner graphique sans spécifier de valeur fixe n'importe où. Donc, mes divs sont les tailles de pourcentage, maintenant, je veux juste mon graphique pour ajuster mon div quelle que soit sa taille. C'est pourquoi j'ai pensé à JS changeant d'échelle (argument) chaque fois que l'événement est déclenché (div redimensionner). Fonction de mise en échelle argument calcul de DivSize/rectBaseSize (x ou y).

OriginalL'auteur yoosiba | 2011-01-18

  1. 14

    Ajouter un attribut id à la <g> et puis essayez ceci:

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

    ou alternativement:

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

    D'autre part, pourquoi ne pas simplement utiliser un négatoscopes à svg contenu redimensionnés automatiquement? Ou il y a des contraintes spécifiques sur ce qui devrait être montré? Il est aussi possible de faire certains qu'avec les non-scripté des solutions basées sur CSS3 media-queries, voir http://www.youtube.com/watch?v=YAK5el8Uvrg (n'oubliez pas de vérifier la description pour les liens vers les fichiers de démonstration indiqué dans la présentation).

    Je n'ai pas regardé viewbox encore, comme pour l'instant j'ai 4 heures de l'expérience avec SVG nad JS 😛 de toute façon je regarde et CSS façon aussi - thx pour le lien.
    comment ajouter une id <g> dynamiquement??
    e.g yourElement.id = "foo"; ou yourElement.setAttribute("id", "foo");.
    thanku tellement @Erik
    J'ai travaillé avec SVG pendant des mois, et je n'avais AUCUNE idée à propos de ce "baseVal".

    OriginalL'auteur Erik Dahlström

  2. 1

    Si vous avez "juste" envie d'une SVG à l'échelle à la taille d'un DIV, vous pouvez le faire avec du 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); 
}

    OriginalL'auteur Tvog