0

我正在使用jQuery SVG绘制一些形状。我现在想在我的形状上绘制一个外部矢量图像(svg 格式)。过去我使用插件的 .image() 方法来绘制外部图标,但现在我希望能够缩放图标,尤其是对于视网膜显示器。

我像这样绘制图标:

this.canvas.image(($parent), icon_box.x, icon_box.y , icon_box.width, icon_box.height, 'resources/img/ui/someicon.svg');

这确实有效,但我想从我的 jQuery 代码中控制 svg 图标/图像/路径的颜色。jQuery SVG image()方法提供了一个设置参数,但我不知道是哪个选项(如果有的话)控制颜色,因为您无法更改例如 jpg 图像的颜色。

那么有没有办法做到这一点?我还想更改鼠标悬停事件的颜色。你会建议不要使用image()方法吗?我只需要让图标适合图标框,因为框(以及里面的图标)会随着我的其他形状缩放。

非常感谢!尼克 =)

4

1 回答 1

1

您可以在 SVG 中使用 CSS :hover 伪类。您只需要在 SVG 中定义 CSS 样式 - 或从 SVG 中引用 CSS 文件。

请参阅此问题以获取示例:如何将鼠标悬停在 SVG 矩形上?

如果由于某种原因无法编辑原始 SVG 文件,则可以在加载后动态添加样式元素。您也可以通过添加指针事件(onmouseover/onmouseout)来实现。

于 2013-09-15T11:23:36.197 回答