Question

我正在使用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()方法？我只需要将图标放在图标框中，因为框（以及内部图标）与其余形状一起缩放。

非常感谢！尼克=）

Answer 1

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

请参阅此问题以获取示例：How to hover over an SVG rect?

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