使用 <object> 用于SVG到HTML以及从HTML内联CSS编辑填充

Question

我想替换一个使用单个swf文件（美国地图）并使用html中标识的flash var的flash对象来动态更改不同状态的颜色。 将单个文件用于多个页面。

我已经创建了一个SVG文件，每个状态的ID名称均为两个字母的州缩写。 我想做的是使用或导入此代码，然后在HTML页面上使用内联CSS操纵SVG图像并调整某些项目的填充。

SVG文件中的嵌入式CSS（或从SVG文件中引用外部CSS文件）将无法满足我希望在多个页面上使用一个图像文件的需求，例如原始SWF文件。

现在尝试使用一堆jQuery和javascript东西将头撞到显示器上几天，但可惜的是，我对JS的熟练程度不足以独自完成这项工作。

感谢您的任何建议或帮助！

Answer 1

不知道我是否完全理解您的要求。 我认为您有一个包含美国所有州的SVG图像，并尝试使用（内联）CSS“突出显示”这些州中的一个或多个州？

如果是这样，传统方法将行不通。 JavaScript无法修改图像，CSS，AFAIK也不可以。 我所知道的唯一方法是，在通过JavaScript更改图像之后，以字节为单位读入SVG或多或少地对它进行base64编码，然后创建一个Image并使用数据URI设置源。

Web中有几个加密器。 我建议研究JSXGraph ，特别是JSXCompressor或类似的东西。 也有一些库可以编辑图像，例如PNGlib ，尽管它并不是您所需要的。 试用Google。 但老实说，我现在不希望自己一个人呆几个小时...

希望我至少能给您带来正确的方向。

Answer 2

SVG中的某些内容似乎与您尝试执行的操作类似。 当您将鼠标悬停在状态上时，状态会更改颜色。 我相信您可以从中学到东西。

Answer 3

我觉得还需要浏览器支持才能解决此问题。 我最终要做的是创建Flash版本http://ryanhollingsworth.com/test/map.html

工作原理是，嵌入swf并使用flashvars将值分配给两个数组，即颜色数组和状态数组。 结果是我可以在多个页面上使用相同的swf，使用不同的颜色，并使用不同的颜色来显示不同的状态。

SVG会赶上，我希望很快:)

Answer 4

您很可能将<object>与URL片段参数一起使用。 请参阅此示例 。

您要求的基本上是SVG参数 （注意：spec是一个工作草案，尚无已知实现，语法可能会更改）。 该规范中的演示使用了一个脚本后备解决方案 ，可能会有所帮助。