外部SVG无法应用内部CSS

时间:2016-09-20 00:15:47

标签: css svg external

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

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

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

以下是Codepen演示此问题。

DEMO

有三个SVG文件被合并并粘贴到页面中,每个文件代表从Illustrator导出SVG的方法之一:

  • 内部CSS (将所有样式放在<style>块中)
  • 内联CSS (将所有样式直接添加到元素中)
  • 演示文稿属性 - (利用SVG演示文稿属性)

如果代码直接粘贴到页面中,则所有内容都会正确显示(图片如下)。

enter image description here

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

enter image description here

我已经尝试了从添加适当的命名空间定义(如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符号,它们似乎也能完美运行。

0 个答案:

没有答案