我正在尝试通过使用外部SVG文件来存储可以保存HTTP请求或带宽的任何内容来优化我的一个项目。我的工作流程通常包括将所有图形导出为单独的SVG文件,然后将它们与gulp-svgstore
组合在一起,之后在页面的任何位置使用它们都是相当简单的任务。
但是,到目前为止,我总是使用内联CSS样式或使用表示属性导出SVG文件。但是这次我想使用内部CSS选项,它将所有样式存储在导出的SVG文件的顶部,在<style>
块内。原因很简单,有很多可重复的样式,重用类可以最大限度地提高性能。
问题在于,我尝试使用内部CSS样式加载外部SVG文件会导致显示黑白图形,就好像未应用内部样式一样。
以下是Codepen演示此问题。
有三个SVG文件被合并并粘贴到页面中,每个文件代表从Illustrator导出SVG的方法之一:
<style>
块中)如果代码直接粘贴到页面中,则所有内容都会正确显示(图片如下)。
但是,如果我将整个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符号,它们似乎也能完美运行。