如何从SVG文件向项目添加CSS(转换)?

时间:2014-02-23 12:21:05

标签: css css3 svg transition

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

要将CSS添加到此类内容中,我会想到一个SVG格式文件。问题是:如何从SVG文件中添加CSS(转换)到某个项目,而不是整个文件本身?

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

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

但我对此不确定。

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

您可以使用通常用于HTML

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