Html 如何将外部CSS与外部SVG符号库一起使用_Html_Css_Svg

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

html css svg

Html 如何将外部CSS与外部SVG符号库一起使用,html,css,svg,Html,Css,Svg,我试图创建一个SVG符号库，供整个网站使用，并使用CSS文件设置符号样式我可以从SVG文件中引用CSS文件。例如，此SVG文件（icons.SVG）在镀铬中显示为浅绿色圆圈：（还有Firefox）我试图引用另一个文件中的符号。（icons_1.html）：存储图标样式消失了。Chrome和Firefox似乎都忽略了外部SVG文件的样式表规范。作为一种可能的解决方法，我向HTML文件添加了一个样式表引用 <!DOCTYPE html> <html lang="e

我试图创建一个SVG符号库，供整个网站使用，并使用CSS文件设置符号样式

我可以从SVG文件中引用CSS文件。例如，此SVG文件（

icons.SVG

）

在镀铬中显示为浅绿色圆圈：

（还有Firefox）

我试图引用另一个文件中的符号。（

icons_1.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树，因为其内容不是正式文档结构的一部分

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

我找到了一个可能的答案，但我不确定它是否理想。我运行一个简单的Ajax例程将SVG库加载到DOM中，然后对

元素使用内部引用。下面是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>


存储图标
$（文档）.ready（函数（）{
$（“#svg libs”）.load（“icons.svg”）；
})

我找到了一个可能的答案，但我不确定它是否理想。我运行一个简单的Ajax例程将SVG库加载到DOM中，然后对

元素使用内部引用。下面是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>


存储图标
$（文档）.ready（函数（）{
$（“#svg libs”）.load（“icons.svg”）；
})

我不这么认为。我不这么认为。

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

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