Question

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

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

问题在于，我尝试使用内部CSS样式加载外部SVG文件会导致显示黑白图形，就好像未应用内部样式一样。

以下是Codepen演示此问题。

DEMO

有三个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。

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

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

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

更新2

经过相当长的时间花在这个问题上之后，我得出一个结论，SVG解析器要么完全忽略SVG文件的<style>块中包含的内部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符号，它们似乎也能完美运行。

外部SVG无法应用内部CSS

0 个答案: