javascript - 将 <object> 用于 SVG 并从 HTML 内联 css 以编辑填充

标签 javascript jquery html css svg

我想替换使用单个 swf 文件(美国 map )并使用 html 中标识的 flash vars 动态更改不同状态颜色的 flash 对象。将单个文件用于多个页面。

我创建了一个 SVG 文件,每个州都有一个 ID 名称,它是两个字母的州缩写。我想做的是使用 或 导入它,然后在 HTML 页面上使用内联 CSS 操作 SVG 图像并调整某些元素的填充。

SVG 文件中的内联 CSS(或从 SVG 文件中引用外部 CSS 文件)无法满足我在多个页面上使用一个图像文件的愿望 – 就像原始的 swf。

几天来一直在显示器上敲打我的脑袋,现在尝试了一堆 jQuery 和 javascript 的东西,但遗憾的是,我对 js 的精通程度还不够高,无法独自完成这项工作。

感谢任何建议或帮助!

最佳答案

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

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

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

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

关于javascript - 将 <object> 用于 SVG 并从 HTML 内联 css 以编辑填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11747680/

相关文章:

html - 带垂直的水平下拉菜单

html - 网格中的 Bootstrap 内容包装

javascript - jQuery 添加 <thead> 并添加 <tbody>

javascript - 在 React 组件中使用静态脚本标签

jquery - jQuery填充_link()以获取Google Analytics(分析)异步语法(跨域)

javascript - 段落标记中设置的最大限制,内容可编辑为 true

html - 如何在鼠标悬停在 div 上时运行 javascript 函数

javascript - JS/RegEx 删除方括号内分组的字符

javascript - 替代 Javascript setInterval 和 ajax 的通知系统

javascript - datetimepicker - 将日期值传递给 Angular Controller