外部 SVG 无法应用内部 CSS

Question

我正在尝试通过使用外部 SVG 文件来存储任何可以节省 HTTP 请求或带宽的项目来优化我的项目之一。我的工作流程通常包括将所有图形导出到单独的 SVG 文件，然后将它们组合起来，然后gulp-svgstore在页面上的任何位置使用它们是一项相当简单的任务。

但是，到目前为止，我一直使用内联 CSS 样式或使用演示文稿属性导出 SVG 文件。然而，这一次我想利用内部 CSS 选项，它将所有样式存储在导出的 SVG 文件的顶部，在一个<style>块内。原因很简单，有很多可重复的样式，重用类可以最大限度地提高性能。

问题是我所有尝试加载具有内部 CSS 样式的外部 SVG 文件都会导致显示黑白图形，就好像没有应用内部样式一样。

这是一个演示该问题的 Codepen。

演示

共有三个 SVG 文件被组合并粘贴到页面中，每个文件代表从 Illustrator 导出 SVG 的一种方式：

• 内部 CSS（将所有样式放在一个<style>块中）
• 内联 CSS（将所有样式内联直接添加到元素上）
• 展示属性-（利用 SVG 展示属性）

如果将代码直接粘贴到页面中，则一切都会正确显示（如下图）。

但是，如果我将整个 SVG 部分（在演示中标记）移动到外部文件，内联 CSS 和演示文稿属性版本都可以正常显示，但内部 CSS 版本显示为好像没有应用顶部的任何样式.

我已经尝试了从添加适当的命名空间定义xmlns:xlink="http://www.w3.org/1999/xlink">到尝试添加和删除外部 SVG 的某些部分的所有方法。如果样式是通过xlink:xref.

我真的没有想法了，所以非常感谢任何帮助。

更新

外部 SVG 通过简单地提供一个路径来加载xlink:href。

<svg>
    <use xlink:href="path/to/the/file/file.svg#target"></use>
</svg>

据我所知，多年来，这一直是包含外部 SVG 的一种非常标准的方式。当然，IE 不支持通过链接外部 SVG，xlink:href但是使用svg4everybody可以轻松缓解该问题。

我暂时切换到在导出的 SVG 上使用内联样式，它按预期工作。但是，我真的很想知道为什么通过加载外部xlink:hrefSVG 会忽略该 SVG 文件中的所有内部样式。

更新 2

在这个问题上花费了大量时间后，我只是得出一个结论，即 SVG 解析器要么完全忽略了包含在<style>外部加载的 SVG 文件块中的内部 CSS 样式，要么有一块我无法解决的难题我仍然失踪。甚至将<style>块粘贴到符号中，这些符号后来用 重用<use>，也无济于事。基本上这个简单的用例不起作用。

<!-- External SVG -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="hello" viewBox="0 0 64 64">
        <style>.shiny{fill:#981e32}</style>
        <path class="shiny" ..."/>
    </symbol>
</svg>

<!-- Loading the symbol from HTML -->
<svg>
    <use xlink:href="path/to/external.svg#hello"></use>
</svg>

我暂时保留这个问题并切换到内联样式和演示属性，因为即使使用外部加载的 SVG 符号，它们似乎也能完美工作。