Question

我正在尝试创建一个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中显示为aqua圈：

（还有Firefox）

我试图引用另一个文件中的符号。（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>

这将aqua样式带回Firefox，但不会出现在Chrome中。在这种情况下，根据标准

，Chrome的行为似乎是正确的

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

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

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

如何将外部CSS与外部SVG符号库

1 个答案: