如何从SVG文件向项目添加CSS（转换）？

Question

我在Adobe Illustration中创建了一个插图，我想在网页上使用它。我还想在插图中的几个项目中添加一些CSS过渡。这些项目包含多个Illustrator图层。

要将CSS添加到此类内容中，我会想到一个SVG格式文件。问题是：如何从SVG文件中添加CSS（转换）到某个项目，而不是整个文件本身？

当我检查未压缩的SVG代码时，我确实会看到诸如<g id="Guitar">之类的内容以及其他具有ID的内容。

基于此，我会想到#guitar:hover { transform:rotate(4deg);transition: all 0.4s ease;}

但我对此不确定。

我希望得到一些反馈。谢谢！

Answer 1

是的，你可以这样做。但是，您需要考虑三件事：

1. 如果您想使用css定位SVG元素，则样式表必须位于该SVG中，例如here
2. 如果使用IMG标记加载svg，您始终可以定位IMG本身。如果该SVG包含css文件，它们将不会应用，因为必须在单个请求中加载图像，因此加载SVG文件，它自己使用IMG标记加载CSS文件，样式将不起作用
3. 如果您将SVG作为背景图像加载，浏览器会将其作为图像文件处理，而不是作为SVG文档处理。因此，:hover，:focus和:active等内容无法正常工作

Answer 2

您可以使用通常用于HTML

的相同CSS选择器设置SVG元素的样式