Nano Hash - криптовалюты, майнинг, программирование

Как изменить аргумент svg ‹g transform=scale(X)› с помощью JavaScript?

Привет.
Допустим, где-то на моей странице есть 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), чтобы сделать то, что должно быть в function getScreenSize(evt) {...}?
Или как добиться подобного эффекта другим способом?

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

javascript svg
18.01.2011

Ответы:


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 (не забудьте проверить в описании ссылки на демонстрационные файлы, показанные в этой презентации).

18.01.2011
  • Я еще не заглядывал в окно просмотра, так как у меня 4-часовой опыт работы с SVG и JS: P В любом случае, я изучаю его и CSS тоже - спасибо за ссылку. 18.01.2011
  • как добавить идентификатор в ‹g› динамически?? 13.11.2013
  • @AbinayaSelvaraju, например, yourElement.id = "foo"; или yourElement.setAttribute("id", "foo");. 14.11.2013
  • Я работаю с SVG уже несколько месяцев и понятия не имею об этом бизнесе baseVal. 06.03.2014

    • 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); 
}
    19.05.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..