1

I'm writing a quite complicated, big and long living (it might display for many days) web page that will also need icons. These icons are supposed to be SVG graphics. Depending on the place on the page the SVG should be recolored by JavaScript calls (jQuery or even jQuery-SVG is fine).

So my questions are:

  • What's the best way to include the SVG in the web page?
    • <img>
    • <object>
    • jQuery(...).svg({loadUrl:...})
    • ...
  • How to "multiply" them?
    • Pre-load in a hidden <div> and clone()?
    • Just load on demand?
  • What's the best way to setup the SVG? (All icons in one file on different layers? All icons in one file separated by place? One file per icon?)
  • What's the best way to recolor the icons then? (Think of quite abstract icons consisting out of a line graphic where that line should get a different color)

Required browsers are the usual compliant modern ones (Firefox, Chrome, Opera, Safari) for normal PC as well as mobile (Android, iOS). Internet Explorer compatability is not required.

4

1 回答 1

1

如果你想重新着色，那么马上就<img>出来了，因为你不能在外部或内部使用 javascript 更改图像。

如果您放置克隆数据，那么您需要确保任何 id 属性在单个文档中保持唯一，因此可能拥有<object>对您来说最简单的东西。

您可以使用直接的 DOM 调用来更改 SVG 图形中事物的颜色，也可以根据需要使用 jquery。

剩下的你可能不得不尝试一些事情，看看它们是如何为你工作的。

于 2012-05-17T13:48:58.087 回答