调整窗口大小会使Chrome / Safari中的SVG精灵消失(因为媒体查询)

时间:2015-05-25 11:12:35

标签: google-chrome svg responsive-design safari rendering

我正在使用svg技术使用堆叠技术插入SVG

堆叠SVG参考: http://simurai.com/blog/2012/04/02/svg-stacks/

我将SVG插入

<embed class="vector vec1" src="/img/sprite.svg#lottery-ticket" type="image/svg+xml"></embed>

因为如果我使用<img>标记,它将无法在Safari中呈现。

SVG里面装满了很多svg代码,每个人都有自己的ID和Viewbox。 svg的顶部是

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 100 100" id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

当我加载IE9 +,Chrome,Safari和Firefox的每个浏览器时,每件事都可以正常运行并且没有任何问题。但是当我手动调整窗口大小时,SVG图像会消失。 我确信问题与我在达到特定断点时在媒体查询中所做的更改有关。 我正在测试并删除代码的各个部分,除了在父级容器div的更改中呈现svg的问题之外,我找不到原因,因为它们是通过响应式设计构建的网站的整体结构。心。

任何想法或建议或我可以尝试看看有什么问题?有人知道Chrome是否表现得不正常吗?

感谢您的帮助。我之所以不放置代码只是因为要插入很多代码而且代码很多并且分成许多小部分。

更新

我认为这个问题与我的流体柱系统有关。我在具有显示的列之间切换:table-cell和float:left,显示:block和float:none。我正在测试并缩小问题范围。

0 个答案:

没有答案