是否可以使用 HTML5 和 CSS3 对矢量图像进行动态着色？答案

【问题标题】：Is dynamic coloring of vector images possible with HTML5 & CSS3?是否可以使用 HTML5 和 CSS3 对矢量图像进行动态着色？
【发布时间】：2011-07-10 08:52:56
【问题描述】：

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

我想根据一个值以编程方式动态更改此图像的颜色。

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

非常感谢编码提示和示例。

【问题讨论】：

我认为首先要问的问题是：如何获取向量points。到目前为止，我还没有在谷歌的任何地方找到该讨论。

标签： javascript html canvas css color-coding

【解决方案1】：

试试看SVG，可以用js控制。这里是它的好图书馆svgweb

download 使用此库归档并在顶部运行文件 /samples/javascript-samples/helloworld.html，您将看到“更改颜色”按钮，我认为这正是您所需要的

【讨论】：

【解决方案2】：

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

见https://developer.mozilla.org/en/canvas_tutorial

【讨论】：

给定图像...如何生成矢量点？任何工具...？

【解决方案3】：

Take a look at this puppy.. 我在 HTML 页面中将其视为原始 SVG 和，功能保持不变...Here's the same "Map Game" as a raw 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 的步伐——不要被插件和后备工具分心……向前迈进，知道这个标准是平台锁定内容创作的丧钟……

【讨论】：

【解决方案4】：

要么使用 SVG，它有一个你可以使用常规 DOM 访问器函数操作的 DOM（你可以将它嵌入到你的 HTML5 中），或者如果它只是那个，使用具有白色背景和透明的图像状态是，因此您可以通过 CSS 更改图像的背景颜色（尽管我猜这对您的情况不是很有用） Canvas 对我来说看起来有点矫枉过正，它的支持并不比 SVG 好。

【讨论】：