使用 jQuery SVG 绘制外部 svg 路径

Draw external svg path with jQuery SVG

本文关键字：svg 路径 外部 绘制 jQuery SVG 使用      更新时间：2023-09-26

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

多谢！尼克 =）

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

有关示例，请参阅此问题：如何将鼠标悬停在 SVG 矩形上？

如果由于某种原因无法编辑原始 SVG 文件，则可以在加载后动态添加样式元素。 您也可以通过添加指针事件（鼠标悬停/鼠标输出）来做到这一点。

相关文章：