0

I want to replace a flash object that uses a single swf file (map of USA) and uses flash vars identified in the html to dynamically change colors of different states. Using a single file for multiple pages.

I've created an SVG file with each state having an ID name of it's two letter state abbreviation. What I'd like to do is import this using or , then using inline CSS on the HTML page manipulate the SVG image and adjust the fill of certain items.

Inline CSS within the SVG file (or referencing an external CSS file from within the SVG file) will not meet my desire of having one image file to be used on many pages – like the original swf.

Beaten my head against the monitor for a few days now trying a bunch of jQuery and javascript stuff, but sadly I am not proficient enough in js to make this work on my own.

Thanks for any advise or help!

Not sure if I completely understood what you are asking for. I think you have an SVG image with all the states of the USA and try to use (inline) CSS to "highlight" one or more of those states?

If so, traditional methods will not work. JavaScript is not able to modify images, neither is CSS, AFAIK. The only way that I would know is to read in the SVG more or less byte for byte and base64-encode it after you have altered the image via JavaScript, then create an Image and set the source using a data URI.

There are a couple of encryptors in the Web. I suggest looking into the JSXGraph, specifically the JSXCompressor or something of that nature. Also there are some libraries to edit images, like PNGlib, although it is not quite what you are looking for. Try Google. But honestly, I don't feel like googling hours for you now by myself...

Hope I at least gave you a kick into the right direction.

4

4 回答 4

1

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

如果是这样，传统的方法就行不通了。JavaScript 不能修改图像，CSS、AFAIK 也不能。我知道的唯一方法是在通过 JavaScript 更改图像后或多或少地读取 SVG 并对其进行 base64 编码，然后创建一个 Image 并使用数据 URI设置源。

Web 中有几个加密器。我建议研究JSXGraph，特别是JSXCompressor或类似的东西。还有一些库可以编辑图像，例如PNGlib，尽管它不是您正在寻找的。试试谷歌。但老实说，我现在不想一个人为你搜索时间......

希望我至少给了你一个正确的方向。

于 2012-07-31T19:59:24.810 回答
0

Here's something in SVG that seems similar to what you're trying to do. The states change colour as you mouse over them. I'm sure you could learn from it.

于 2012-07-31T22:04:12.697 回答
0

I don't feel browser support is yet where I need for this question to be answered. What I ended up doing is creating the flash version http://ryanhollingsworth.com/test/map.html

How it works, you embed the swf and use flashvars to assign values to two arrays, color array and state array. Result is I can use the same swf on multiple pages, with different colors and have different states colored differently.

SVG will catch up, soon i hope :)

于 2012-08-01T19:37:52.523 回答
0

You can most probably use <object> with URL fragment parameter passing. See this example.

What you're asking for is basically SVG Parameters (note: spec is a working draft, there are no known implementations and the syntax will likely change). There is a script fallback solution used by the demos in that spec that might be helpful.

于 2012-08-13T13:32:43.490 回答