0

我在网页中嵌入了一个 SVG 图像(由 Adob​​e Illustrator CS6 生成的代码)。我已经在这个 jsFiddle中隔离了 SVG 代码(它也嵌入在下面)。

在 Chrome(但不是 Firefox)中,当 SVG 的底部不在视图中时,它不会呈现。缩小窗口并滚动到 jsFiddle 上 HTML 部分的顶部,然后重新加载以查看我在说什么。单击该部分后,它就会出现。

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

编辑:提交了 WebKit 错误,因为它似乎是一个 WebKit 错误。查看错误报告

<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>
4

1 回答 1

0

这是由于使用过滤器导致的 Webkit 错误。我删除了<filter>部分和flter="url(...)"标签以阻止过滤器运行,它现在可以工作了。

于 2013-01-14T19:02:17.993 回答