Доброго вам времени суток, коллеги!
Я только начинаю работать с SVG, так что может и элементарщину спрашиваю...
У меня есть такая задача, пока отвлеченно от SVG:
Есть несколько "графических компонентов", каждый из которых представляет собой набор именованных состояний. Каждое состояние представляет собой набор именованных векторных примитивов. Для всего компонента в целом, для состояния и для отдельного примитива задается стиль его отображения (в том числе анимация). На области отображения размещаются объекты, созданные на основе этих компонентов. Для каждого объекта можно доопределить/переопределить стиль его отображения и выбрать отображаемое состояние. На этапе выполнения необходимо динамически иметь возможность менять состояние.
С первого взгляда, все это хорошо ложится в SVG. Компоненты и объекты очень похожи на связку тегов symbol и use. Стили отображения вполне себе хорошо реализуются через CSS.
Две вещи мне непонятны:
1. Как в данном случае быть с переключением состояний? По хорошему было бы: "задал класс состояния->магия->сменилось отображаемое состояние". Есть ли такая магия в SVG или придется затачивать JS-топор и вручную, редактируя svg-DOM, менять одно состояние на другое?
2. После ряда экспериментов понял, что в use не имею доступа к внутренней структуре, задаваемой в symbol (а без этого не переопределить стили для отдельных примитивов объекта). Это действительно так или я что-то неправильно делаю? Если это так, то получается symbol use мне не подходят, и опять таки придется вручную формировать итоговый SVG документ, вставляя "состояние" как g?
UPD: Пока складывается впечатление, что CSS-файл со всеми стилями будет статическим, а SVG будет (пере)генерироваться на лету, при изменении состояний объектов.
Не совсем понял фразы типа "что в не имею доступа к внутренней структуре, задаваемой в"
: имеется в виду, что мне для размещаемого объекта нужно уметь переопределять стили входящих в него примитивов.
Например, мой компонент состоит из двух прямоугольников. На уровне состояний я определяю, что в состоянии таком-то, прямоугольники будут отрисованы пунктиром, в другом состоянии будут сплошным карандашом, в третьем состоянии будет анимация - за секунду прямоугольники станут прозрачными, а потом опять непрозрачными. На основе этого компонента я размещаю на области рисования (не владею терминологией....canvas..не?) три объекта. И уже у объектов определяю, что первый объект должен быть полностью красным, второй - полностью зеленым, а у третьего объекта первый прямоугольник должен быть красным, а второй - зеленым.
Когда я использую - у меня уже не получается изменить ни цвет объектов целиком, ни отдельно внутренних прямоугольников.
Удалили мои теги из комментария =) Там была структура SVG для примера на подобии
svg
g
rect id = "1й прямоугольник" /rect
rect id = "2й прямоугольник" /rect
/g
/svg
а у прямоугольников внутри g позиционирование ведь не относительно координат g, не очень удобно....и размещать и анализировать потом что получилось
ну и сам компонент довольно изощренный может быть - плодить в итоговом SVG не хотелось бы......надо что-то типа symbol или defs использовать. Но вот в symbol стили нельзя переопределить, это не есть гут.
Обычно пишу так, чтобы через пару месяцев вернувшись к проекту для добавления функционала не пришлось бы все переписывать и не хотелось оторвать руки себе сегодняшнему. Хотя второе часто не срабатывает....
Простой
Средний