Как изменить аргумент svgс JavaScript?

Question

Привет.
Допустим, где-то на моей странице у меня есть SVG-графика.Есть одна группа, которую я хотел бы изменить, когда будет запущено какое-то событие.Как мне это сделать?
пример кода:

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

Я хочу изменить аргумент scale (13), чтобы сделать то, что должно быть в функции getScreenSize (evt) {...} ?
Или как добиться аналогичного эффекта по-другому?

edit
Что касается общей идеи, я хочу изменить размер графики без указания фиксированных значений в любом месте.Таким образом, мои размеры делений основаны на процентах, теперь я просто хочу, чтобы моя графика точно соответствовала моему div, независимо от его размера.Вот почему я думал о том, что JS изменяет аргумент scale () всякий раз, когда происходит событие (div resize).Функция поместила бы в вычисление аргумента масштаба DivSize / rectBaseSize (x или y).

Answer 1

Добавьте атрибут id к <g> и попробуйте следующее:

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

или альтернативно:

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

С другой стороны, почему бы вам просто не использовать viewBox, чтобы автоматически изменить масштаб содержимого svg? Или есть конкретные ограничения на то, что должно быть показано? Также возможно сделать это с помощью не скриптовых решений, основанных на медиа-запросах CSS3, см. http://www.youtube.com/watch?v=YAK5el8Uvrg (не забудьте проверить описание для ссылок на демонстрационные файлы, показанные в этой презентации).

Answer 2

Если вы просто хотите, чтобы SVG масштабировался до размера DIV, вы можете сделать это с помощью 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); 
}