Question

我有3个文件：

的index.html

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <i class="logo myRed" aria-hidden="true"></i>
</body>
</html>

的style.css

.logo:before {
    content: url("logo.svg");
}
.myRed {
    color: #ff2000;
}

logo.svg的的

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100">
    <rect id="logo" width="300" height="100" />
</svg>

如何在CSS中设置svg内容的样式？（例如，颜色，字体大小......） - 就像在FontAwesome中一样。

Answer 1

你做不到。

CSS content: url(image.ext)类似于在<img>标记中加载图片。在<img>中加载图像是在一个孤立的文档中加载它，任何人都无法访问，并且无法访问任何内容。

FontAwesome不会加载这样的图标，它们会构建字体，然后调用content属性中的相应字符，例如"\f07b"。
因此，对于浏览器，FontAwesome图标只是文本，您可以像任何其他文本一样设置样式。

要通过css为svg设置样式，它需要与样式表位于同一文档中。

好的，有一个黑客可以帮助你，但我不知道它有多好，也不会得到支持：
Lea Verou demonstrated我们可以（ab）使用target: CSS选择器和#elem_id片段标识符来显示SVG元素的特定节点或应用特定规则。

在你svg的<style>中你可以创建像这样的规则：

#elem_id_1:target ~ #elem_to_color{
    fill: red;
}
#elem_id_2:target ~ #elem_to_color{
    fill: green;
}

然后在你的标记中，你只需要在#elem_to_color之前放置一些空元素和相应的id。

<g id="elem_id_1"></g>
<g id="elem_id_2"></g>
<rect id="elem_to_color"/>

现在，当您将svg加载为yourfile.svg#elem_id_1时，第一条规则将适用，#elem_to_color将为红色。如果您将其加载为yourfile.svg#elem_id_2，则#elem_to_color将为绿色。

这个hack允许有一个单独的svg文件，我们可以从外部控制渲染的样式。

/* a single file for all colors */

.logo::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg);
}

.logo.green::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#green);
}

.logo.red::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#red);
}

<!-- logo.svg content
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  <style>
    #green:target ~ #elem_to_color{
      fill: green;
    }
    #red:target ~ #elem_to_color{
      fill: red;
    }
  </style>
  <g id="red"></g>
  <g id="green"></g>
  <rect id="elem_to_color" width="30" height="30"/>
</svg>
-->

<i class="logo"></i>
<i class="logo green"></i>
<i class="logo red"></i>

Answer 2

使用这些CSS属性：

fill:  /* color */
font-size:   /* font-size */

它将覆盖原始SVG值，如下所示。

＆＃13;

.logo svg {
  fill: #eee;
}
.logo svg text {
  font-size: 30px;
}
.myRed {
color: #ff2000;
}

＆＃13;

<div class="logo myRed" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="logo" width="300" height="100" />
    <text style=" stroke:black; fill:red;" x="30" y="50" font-size="8">Text Here</text>
  </svg>
</div>

＆＃13;

Answer 3

更简化的解决方案如下。第一行css设置文本颜色（填充），第二行设置文本元素的字体属性，第三行设置矩形id（徽标）以设置填充。

＆＃13;

.logo svg {
  fill: #ff0000;
}
.logo svg text {
  font-size: 45px;
  font-face:Arial,Helvetica;
  font-weight:bold
}
#logo {
  fill:#eee;
}

＆＃13;

<div class="logo" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="logo" width="300" height="100" />
    <text x="30" y="50">Text Here</text>
  </svg>
</div>

＆＃13;

使用CSS

3 个答案: