0
我有一个嵌入在网页中的SVG图像（代码由Adobe Illustrator CS6生成）。我在this jsFiddle（它也嵌入在下面）中隔离了SVG代码。页面加载中未显示的SVG元素不显示
在Chrome（而不是Firefox）中，当SVG的底部不在视图中时，它不呈现。缩小窗口并滚动到jsFiddle上HTML部分的顶部，然后重新加载以查看我在说什么。一旦你点击该部分，它就会出现。
我能做些什么来解决这个问题？
编辑： WebKit错误提交，因为它似乎是一个WebKit错误。 View bug report
<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>
我想你应该报告一个铬或webkit的错误。 –
现在你说webkit我意识到我应该也检查Safari。同样的事情发生，所以我会提交一个错误报告。 –