Цель состоит в том, чтобы сохранить динамические изменения стиля (например, ширину, цвет фона, поворот, положение), сделанные с помощью jQuery.
С SVG это легко. Предположим, что некоторый прямоугольник составляет 50% ширины его родителя. Если вы хотите, чтобы он составлял 75%, измените атрибут width. Затем вы можете сохранить документ, и это изменение сохраняется без дополнительной работы.
50% Ширина:
<svg width="200" height="200">
<rect width="50%" height="50%" fill="blue" />
</svg>
75% Ширина:
<svg width="200" height="200">
<rect width="75%" height="75%" fill="blue" />
</svg>
С HTML и jQuery все по-другому. Если вы измените ширину прямоугольника с помощью jQuery следующим образом , это изменение не появится в документе.
Как сохранить эти и другие изменения стиля на сервере?
Похоже, есть два варианта, ни один из которых не выглядит таким чистым, как SVG. Есть ли альтернатива?
Вариант 1: Не используйте jQuery для изменения прямоугольника. Обновите атрибут style вручную, чтобы изменения стиля выглядели встроенными.
Вариант 2: Используйте jQuery для изменения прямоугольника, но сохраняйте изменения с помощью пользовательских атрибутов, таких как «data-width». При загрузке документа инициализируйте элементы на основе этих пользовательских атрибутов. По сути, эта опция требует дублирования функций, которые вы получаете бесплатно с SVG.