如何将外部 CSS 与外部 SVG 符号库一起使用答案

【问题标题】：How to use external CSS with an external SVG symbol library如何将外部 CSS 与外部 SVG 符号库一起使用
【发布时间】：2015-10-22 04:53:00
【问题描述】：

我正在尝试创建一个用于整个网站的 SVG 符号库，并使用 CSS 文件设置符号样式。

我可以从 SVG 文件中引用 CSS 文件。例如，这个 SVG 文件 (icons.svg)

<?xml-stylesheet href="aqua-icons.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" xml:space="preserve">
  <defs>
    <symbol id="my-icon" height="48" width="48" viewbox="0 0 48 48">
      <circle class="filled" cx="24" cy="24" r="24"/>
    </symbol>
  </defs>
  <use xlink:href="#my-icon" x="0" y="0" width="48" height="48"/>
</svg>

结合这个 CSS 文件 (aqua-icons.css)

.filled {
  fill: aqua;
  stroke: black;
}

在 Chrome 中显示为水色圆圈：

（还有火狐）

我试图从另一个文件中引用符号。 (icons_1.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage icons</title>
</head>
<body>
  <svg width="0.5in" height="0.5in" viewbox="0 0 48 48">
    <use xlink:href="icons.svg#my-icon" x="0" y="0" width="48" height="48"/>
  </svg>
</body>
</html>

样式消失。 Chrome 和 Firefox 似乎都忽略了外部 SVG 文件的样式表规范。作为一种可能的解决方法，我添加了对 HTML 文件的样式表引用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage icons</title>
  <link rel="stylesheet" href="aqua-icons.css">
</head>
<body>
  <svg width="0.5in" height="0.5in" viewbox="0 0 48 48">
    <use xlink:href="icons.svg#my-icon" x="0" y="0" width="48" height="48"/>
  </svg>
</body>
</html>

这会在 Firefox 中恢复水色样式，但不会在 Chrome 中。在这种情况下，根据标准，Chrome 的行为似乎是正确的

CSS2 选择器不能应用于（概念上）克隆的 DOM 树，因为它的内容不是正式文档结构的一部分。2

那么有没有办法从外部 CSS 文件中设置外部引用的 SVG 符号的样式？

【问题讨论】：

我不这么认为。 If you want to keep your svg in files, the CSS needs to be defined inside of the svg file.

标签： html css svg

【解决方案1】：

我找到了一个可能的答案，但我不确定它是否理想。我运行一个简单的 Ajax 例程将 SVG 库加载到 DOM 中，然后在我的 <use> 元素上使用内部引用。这是 HTML 现在的样子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage icons</title>
  <link rel="stylesheet" href="aqua-icons.css">
  <script src="/ext/jquery-1.11.3.js"></script>
  <script>
  $(document).ready(function(){
      $("#svg-libs").load("icons.svg");
  })
  </script>
</head>
<body>
  <div id="svg-libs" style="display:none"></div>
  <svg width="0.5in" height="0.5in" viewbox="0 0 48 48">
    <use xlink:href="#my-icon" x="0" y="0" width="48" height="48"/>
  </svg>
</body>
</html>

【讨论】：