Google chrome 页面加载时不在视图中的SVG元素不显示

我在网页中嵌入了一个SVG图像（带有Adobe Illustrator CS6生成的代码）。我在中隔离了SVG代码（它也嵌入在下面）

在Chrome（但不是Firefox）中，当SVG的底部不在视图中时，它不会渲染。缩小窗口并滚动到JSFIDLE上HTML部分的顶部，然后重新加载以查看我所说的内容。单击该部分后，它将显示

我能做些什么来解决这个问题

编辑：WebKit bug已归档，因为它似乎是一个WebKit bug

这是由于使用过滤器而导致的Webkit错误。我删除了

部分和

flter=“url（…）”

标记，以阻止过滤器运行，现在它可以工作了。

我想你应该报告chrome或webkit错误。既然你说webkit，我意识到我也应该检查Safari。同样的事情也会发生，所以我会提交一份bug报告。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="690px" height="420px" viewBox="0 43 690 420" enable-background="new 0 43 690 420" xml:space="preserve">
<defs></defs>
<filter id="fullblur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>

<filter id="halfblur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>

<filter id="noblur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>


<!-- BACKGROUND (hidden) -->
<rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/>

<!-- STAGE -->
<ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/>



<!-- SEATS -->
<g>

    <!-- STUDENT SECTIONS -->
    <g id="studhover">
        <g filter="url(#halfblur)" id="studchart" class="chartsection">

        <g id="s1">
                <path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V136z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V136z"/>
    </g>

            <g id="s2">
            <path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V150z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V150z"/>
        </g>

            <g id="s3">
            <path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150
            c-2.762,0-5,2.239-5,5V136z"/>
        </g>

            <g id="s4">
            <path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V205.5z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V205.5z"/>
            </g>

            <g id="s5">
            <path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V218z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V218z"/>
        </g>

            <g id="s6">
            <path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
        c-2.762,0-5,2.239-5,5V205.5z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
        c-2.762,0-5,2.239-5,5V205.5z"/>
        </g>

        </g>

        <!-- Filling in the gaps -->
        <g>
            <rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" />
            <rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" />

            <rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" />
            <rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" />
            <rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" />
            <rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" />
            <rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" />
            <rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" />
        </g>

    </g>

    <!-- GUEST SECTIONS -->
    <g id="guesthover">
        <g filter="url(#halfblur)" id="guestchart" class="chartsection">
            <g>
        <path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V273z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V273z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5
            V273z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445
            c-2.762,0-5,2.239-5,5V273z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V342.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V342.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
            V342.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445
            c-2.762,0-5,2.238-5,5V342.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
            c-2.761,0-5,2.239-5,5V287z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
            c-2.761,0-5,2.239-5,5V287z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V355z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V355z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V410.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V410.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
            V410.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445
            c-2.762,0-5,2.238-5,5V410.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V423z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V423z"/>
    </g>
        </g>

        <!-- Filling in the gaps -->
        <g>
            <rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" />
            <rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" />

            <rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" />
            <rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" />
            <rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" />
            <rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" />
            <rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" />
            <rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" />
            <rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" />
            <rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" />
            <rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" />
        </g>

    </g>
</g>
</svg>