使用 CSS 设置 SVG 图像样式：一种新颖的方法

在本文中，我们将探索一种使用 CSS 嵌入 SVG 图像并操纵其外观的新颖方法，而无需使用 CSS使用 JS-SVG 框架。

问题陈述

以前，集成 SVG 图像同时通过 CSS 保持对其元素的访问一直是一个挑战。虽然 JS-SVG 框架提供了解决方案，但对于具有翻转效果的简单图标实现来说，它们可能很复杂。

解决方案：jQuery SVG 图像替换

我们提出的解决方案涉及替换传统的 标签具有“svg”类。该类触发一个 jQuery 脚本，该脚本从指定源获取内联 SVG 代码并将其插入到 HTML 中。

jQuery 代码还保留原始图像的 ID 和类，确保与 CSS 规则兼容。

优点和实现

这种方法提供了几个优点：

• 简单的 CSS 样式： SVG 元素现在可以通过 CSS 访问，允许颜色变化等修改。
• 跨浏览器兼容性：该方法主流浏览器都支持。
• 简单性：代码简洁，简单明了，没有 JS-SVG 框架的复杂性。

实现此解决方案：

1. 使用以下 HTML 代码嵌入 SVG：

2. 在您的项目中包含 jQuery 代码:

jQuery('img.svg').each(function() {
  // ... (jQuery code to replace the image with inline SVG) ...
});

示例和结论

您可以在 http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html 上查看演示。此方法提供了一种在 Web 应用程序中嵌入 SVG 图像并设置其样式的便捷高效的方法。