使用 CSS 将样式 SVG 作为内容标签加载到 HTML [关闭]答案

【问题标题】：Style SVG loaded to HTML as content tag with CSS [closed]使用 CSS 将样式 SVG 作为内容标签加载到 HTML [关闭]
【发布时间】：2020-02-20 00:35:17
【问题描述】：

我有 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 content 属性中指出的 SVG 样式？（例如颜色，字体大小，...） - 就像在 FontAwesome 中一样。

【问题讨论】：

如果你不知道，只有 inline sag 可以用 css 设置样式。请记住这一点。
@AnuragDaolagajao 这不是真的，您可以使用 CSS 为任何 SVG 设置样式，它根本不适用跨文档。
您需要将 CSS 放入 SVG 文件中。
此问题未正确关闭。它问了一个我通过搜索找到的有用问题，它回答了我的问题。这就是正确问题的定义。
这就是“社区审核”的问题：人们只想结束问题，因为这让他们觉得自己在参与其中。

标签： html css svg font-awesome

【解决方案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>

【讨论】：

【解决方案2】：

使用这些 CSS 属性：

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

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

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

<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>

【讨论】：

在 FontAwesome 中，标签 被视为字体。 html: css: 同上 svg: 同上在这种情况下，svg 文件应该由 CSS 内容标签加载 - 不直接位于 html 中。示例在 FontAwesome...
如果您有自己的 SVG，为什么要使用 FontAwesome？内联 SVG 相对于字体图标的一些优势：css-tricks.com/icon-fonts-vs-svg

【解决方案3】：

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

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

<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>

【讨论】：