Возможна ли динамическая раскраска векторных изображений с помощью HTML5 и CSS3?

Question

Это то, чего я пытаюсь достичь.У меня есть изображение - контур штата Калифорния.

Я хотел бы изменить цвет этого изображения динамически и программно на основе значения.

ЕстьМожно ли добиться этого с помощью HTML5 / CSS3 / Javascript?В более широкой схеме вещей я намереваюсь иметь всю карту - только чистый контур.И заполните каждое из этих состояний динамическими цветами, рассматривая каждое из этих состояний как объект.

Советы по кодированию и примеры очень важны.

Answer 1

Посмотрите на этого щенка .. Я видел его в виде необработанных SVG и на странице HTML, и функциональность осталась прежней ... Вот та же самая «Игра в карты», как и в необработанном SVG ...

Базовый тип документа SVG / XML используется как image/svg+xml, а интерактивность полностью содержится в блоке JavaScript <![CDATA[. С определениями формы, типографикой и стилем в пространстве имен SVG ...

Мост между ними лежит в обработчиках критических событий, в частности <g>, <path> и т. Д. Дескрипторы элементов XML ..., например, <path id="Oklahoma" onclick="Check(evt)" onmouseover="On(evt)" onmouseout="Off(evt)" d="M 3.... и т. Д.

Это просто статичный скриншот, но, как вы можете видеть, он очень похож на ваш конкретный проект ...

Тем не менее, я делаю отступление, но количество запутанной и противоречивой информации относительно лучших практик SVG ... Я, во всей серьезности, виню в тонко завуалированном сговоре между Microsoft и Adobe - в печальной попытке в борьбе с этим конкретным стандартом - и независимой революцией поставщиков, которая стала бы возможной альтернативой «общего» развертывания. Прошло 10 лет, и импульс прогресса вот-вот оторвет подошвы от их манипулирующих, волочащихся ног! Не отставайте от SVG - и не отвлекайтесь на плагины и запасные варианты ... Продвигайтесь вперед и знайте, что этот стандарт НЕМЕДЛЕННО для разработки контента, заблокированного на платформе ...

Answer 2

Если у вас есть контур в виде векторных точек (а не в виде изображения), было бы тривиально преобразовать его в объект HTML5 Canvas, заполненный и очерченный по мере необходимости.

См. https://developer.mozilla.org/en/canvas_tutorial

Answer 3

попробуйте взглянуть на SVG, вы можете управлять им с помощью js.Вот хорошая библиотека для этого svgweb

скачайте архив с этой библиотекой и запустите файл /samples/javascript-samples/helloworld.html вверху вы увидите кнопку "Изменить цвета "Я думаю, это именно то, что вам нужно

Answer 4

Либо сделайте это с SVG, у которого есть DOM, которым вы можете манипулировать с помощью обычных функций доступа DOM (и вы можете встроить его в свой HTML5), или, если это так, используйте изображение с белым фоном и прозрачным, где состояние так, что вы можете изменить цвет фона изображения с помощью CSS (хотя я думаю, что это не очень полезно для вашего случая) Canvas выглядит для меня излишним, и его поддержка не лучше, чем у SVG.