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

Question

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

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

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

Советы по кодированию и образцы приветствуются.

Answer 1

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

Смотрите https://developer.mozilla.org/en/canvas_tutorial

Answer 2

Взгляните на этого щенка... Я видел его как сырой SVG и внутри HTML-страницы, и функциональность осталась прежней... Вот та же "игра в карты", что и у необработанного SVG...

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

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

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

Answer 4

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