HTML5＆amp ;;动态着色矢量图像是否可行; CSS3？

Question

这就是我想要实现的目标。我有一张图片 - 加利福尼亚州的轮廓。

我想基于值动态地和编程地更改此图像的颜色。

是否可以使用HTML5 / CSS3 / Javascript实现此目的？ 在更大的计划中，我打算拥有整个地图 - 只是一个空白的轮廓。并通过将每个状态视为对象来用动态颜色填充每个状态。

非常感谢编码提示和样本。

Answer 1

试试看SVG，你可以用js来控制它。这里有一个很好的图书馆svgweb

download存档此lib并运行文件/samples/javascript-samples/helloworld.html，您将看到“更改颜色”按钮我认为这正是您需要的

Answer 2

如果您将轮廓作为矢量点（而不是图像），则将其渲染为HTML5 Canvas对象，根据需要填充和概述，这将是微不足道的。

请参阅https://developer.mozilla.org/en/canvas_tutorial

Answer 3

Take a look at this puppy ..我在HTML页面中看到它是原始SVG 和，功能保持不变...... Here's the same "Map Game" as a raw SVG ... < / p>

基础doctype是SVG / XML，作为image/svg+xml，交互性完全包含在<![CDATA[ JavaScript块中。具有SVG命名空间内的形状defs，排版和样式...

两者之间的桥梁位于特定<g>，<path>等的关键事件处理程序中.XML元素描述符......例如<path id="Oklahoma" onclick="Check(evt)" onmouseover="On(evt)" onmouseout="Off(evt)" d="M 3....等。

这只是一个静态屏幕截图，但正如您所看到的，它与您的特定项目非常相似......

那说，而且我确实离题了，但是有关SVG最佳实践的错综复杂且相互矛盾的信息的数量......我严肃地指责微软和土坯之间的一种薄薄的勾结 - 这是一次悲伤的尝试阻碍这个特殊的标准 - 以及因为成为“一般”部署的可行选择而导致的供应商不可知的革命。已经10年了，进步的势头即将从他们的操纵，拖拽脚上撕下鞋底！跟上SVG的步伐 - 不要被插件和后备分散注意力......向前迈进并知道这个标准是平台锁定内容创作的丧钟......

Answer 4

使用SVG执行此操作，SVG具有可以使用常规DOM访问器功能操作的DOM（并且可以将其嵌入HTML5中），或者如果只是那个，则使用具有白色背景且透明的图像状态是，所以你可以通过CSS改变图像的背景颜色（虽然我猜这对你的情况不是很有用） Canvas看起来对我来说太过分了，它的支持并不比SVG好。