使用css3为svg元素设计样式 [英] Styling an svg element with css3

问题描述

我正在使用ui进行网络应用程序。我完成了html5 / css3部分，唯一剩下的是一对夫妇的svg元素。问题是，我有不同的主题的应用程序，所以我不知道如何风格这些svg元素，所以他们改变与主题。我想一种方法是为每个主题创建不同的.svg文件，但有一种方法来给一个svg元素（它可以包含在html文件，它不必是一个外部文件）边框，渐变，阴影等只使用css？

I'm working on ui for a web application. I finished html5/css3 part, the only thing left is a couple of svg elements. The problem is that I have different themes for the application, so I'm not sure how to style those svg elements so they change with the theme. I guess one way would be to make different .svg files for each theme, but is there a way to give an svg element (it can be included in html file, it doesn't have to be an external file) borders, gradient, shadow and so on using only css?

推荐答案

您可以使用CSS来更改SVG元素的颜色，填充属性。例如，你可以做如下：

You can use CSS to change the colors of the SVG element, through the stroke and fill properties. For instance, you can make something like:

rect
{
   fill: blue;
   stroke: black;
}

如果您不想更改所有矩形，在你的SVG中定义类，并改变它们的填充和描边属性。

If you don't want to change, say, all rectangles, you can define classes in you SVG and change their fill and stroke properties as well.

不幸的是，你不能使用CSS改变SVG图像的边框，渐变和阴影。至少，不是以相同的方式，你将使用CSS3在HTML元素中更改它。你可以做很多程序。例如，如果您有阴影样过滤器您可以通过在CSS中更改其过滤器属性，将其动态应用于任何元素：

Unfortunately, you can't change borders, gradients and shadows in a SVG image using CSS. At least, not in the same way you would change it in html elements with CSS3. You can do a lot programatically though. For instance, if you have shadow-like filters defined in your SVG image, you can dynamically apply it to any element by changing its filter property in CSS:

filter:url(#filterName);

由philipp发布的链接列出所有可以通过CSS更改的SVG属性
您可以随时更改您的SVG，可能不值得你的情况下的麻烦。

The link posted by philipp lists all SVG attributes that can be changed through CSS You can always change your SVG programatically, but it's probably not worth the trouble in your case.

这篇关于使用css3为svg元素设计样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！