Question

我有一个需要使用的svg对象数组。加载页面时，每个svg都插入HTML的两个不同部分，并且在给定时间只显示一个部分。我使用display属性和媒体查询隐藏/取消隐藏包含SVG和其他标签的完整部分。

每个SVG至少有两个部分（A / B）; A部分是单一颜色，但B部分使用LinearGradient进行填充。

这种方法在Chrome和IE浏览器中运行良好，但在调用媒体查询时，Firefox不会显示SVG的B部分。

我尝试将linearGradient url的id更改为类，删除标记，使用和标记，更改显示属性类型，但没有任何效果。

这是问题的简单版本：

感谢您提供任何帮助。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style type="text/css">

        #one{
            display: block;
        }
        #two{
            display: none;
        }

        .svgIcon{
            display: inline-block;
            border: 2px solid red;
        }
        #container{
            display: flex;
        }

        @media screen and (min-width: 568px) {

            #one{
                display: none;
            }
            #two{
                display: block;
            }

        }
    </style>
</head>

<body>

<section id="one">
    <h1>One</h1>
    <div class="svgContainer"></div>
</section>

<section id="two">
    <div id="container">
        <div>
            <div class="svgContainer"></div>
        </div>
        <h1>Two</h1>
    </div>
</section>


<script type="text/javascript">

    var svgIcons = {
        'svg1' : '\
        <div class="svgIcon">\
            <svg version="1.1" class="infoIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
                 width="72px" height="70px" viewBox="0 0 72 70">\
                <defs>\
                    <linearGradient id="info_1_" gradientUnits="userSpaceOnUse" x1="32.895" y1="49.7476" x2="32.895" y2="28.2964">\
                        <stop  offset="0" style="stop-color:#ff88ff"/>\
                        <stop  offset="1" style="stop-color:#88dddd"/>\
                    </linearGradient>\
                </defs>\
                <circle cx="35" cy="35" r="30" fill="#555555"/>\
                <circle cx="35" cy="35" r="20" fill="url(#info_1_)"/>\
            </svg>\
        </div>'
    }

    var svgContainers = document.getElementsByClassName('svgContainer');

    for(var i = 0; i < svgContainers.length; i++){
        svgContainers[i].innerHTML = svgIcons['svg1'];
    }

</script>
</body>
</html>

在Firefox上显示同一SVG的多个副本时出现错误

0 个答案: