Настройка размера объекта SVG с помощью JavaScript

Очень простой вопрос SVG/JavaScript: как вы устанавливаете ширину и высоту объекта SVG (полигон, путь, эллипс и т. Д.) Через JavaScript?Настройка размера объекта SVG с помощью JavaScript

Это мой первый интерактивный SVG после многих лет работы в ActionScript. Я просто пытаюсь установить высоту баров на гистограмме динамически. Я получил довольно пути в этот проект настройки цвета заливки и видимость различных объектов с пешеходом кода:

targetbar=document.getElementById("rep"+loopcount); 
targetbar.setAttribute("visibility", "visible");

Но забивания height и номер в setAttribute команда не работает, и не имеет ничего другого я 'скопированы из различных фрагментов кода, найденных в Интернете.

Думаю, что я бы сохранил этот первый проект как простой ваниль, я не использовал никаких внешних библиотек. По крайней мере, сейчас я ищу решение, которое не включает JQuery, Raphael, D3 и т. Д.

источник

2013-06-26 Bill Gregg

Большинство элементов в SVG просто не имеют атрибутов высоты и ширины. Многоугольники имеют набор координат вершин, траектории имеют координаты различных объектов пути, а эллипсы имеют полумагнетик и полумесячные радиусы оси.

Вы можете масштабировать фигуру, задав для нее атрибут преобразования, который будет регулировать ширину и высоту пропорционально, например. transform = "scale (1.1, 0.9)" будет иметь любую форму немного шире и менее высокой, чем обычно.

источник

2013-06-26 08:38:30

Спасибо, Роберт. Я посмотрел на команду transform, но, похоже, это код, который принадлежит в SVG XML, а не в JavaScript. Мне нужно настроить размер баров на разные высоты, поскольку пользователь взаимодействует с SVG, и я не вижу, как это будет работать в XML. В ActionScript это выглядит примерно так: function updatebaron (Release) { play(); } –

Я понятия не имею, что вы подразумеваете под «не в JavaScript». Javascript может изменять DOM для установки/редактирования/удаления преобразования, если это то, что вам нужно. Просто вызовите setAttribute или removeAttribute, если это необходимо. –

Извините, я опубликовал этот комментарий преждевременно, но я думаю, что вы все равно получили ответ. Я сохраняю весь код, который на самом деле ничего не делает за пределами XML в разделе

Настройка размера объекта SVG с помощью JavaScript

ответ

Смежные вопросы