Question

我目前正在使用SVG资源开发网站。它工作得很好，即使在IE上，但其中一个图像会显示一个十字符号，如下图所示。

为什么会这样？要清楚的是，所有其他SVG在没有十字架的情况下显示得很好。

SVG rendered with strange cross symbol added

以下是SVG的来源

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 340 340" enable-background="new 0 0 340 340" xml:space="preserve">
<g>
    <g>
        <defs>
            <path id="SVGID_1_" d="M122.2,166.8c0-26.3,21.4-47.7,47.7-47.7c26.3,0,47.7,21.4,47.7,47.7c0,26.3-21.4,47.7-47.7,47.7
                C143.6,214.5,122.2,193.1,122.2,166.8 M118.6,166.8c0,28.3,23,51.3,51.3,51.3c28.3,0,51.3-23,51.3-51.3c0-28.3-23-51.3-51.3-51.3
                C141.6,115.5,118.6,138.5,118.6,166.8"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  overflow="visible"/>
        </clipPath>

            <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-764.0101" y1="929.5802" x2="-762.5108" y2="929.5802" gradientTransform="matrix(0 -68.4499 -68.4499 0 63799.5469 -52078.2773)">
            <stop  offset="0" style="stop-color:#EF4136"/>
            <stop  offset="0.2557" style="stop-color:#A52D25"/>
            <stop  offset="0.5203" style="stop-color:#5F1A15"/>
            <stop  offset="0.7415" style="stop-color:#2B0C0A"/>
            <stop  offset="0.9078" style="stop-color:#0C0303"/>
            <stop  offset="1" style="stop-color:#000000"/>
        </linearGradient>
        <rect x="118.6" y="115.5" clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" width="102.6" height="102.6"/>
    </g>

        <image overflow="visible" width="320" height="320" xlink:href="B2CC51E1493DFA15.png"  transform="matrix(0.3598 0 0 0.3598 112.3799 108.4984)">
    </image>
    <polyline fill="none" points="227.5,108.5 112.4,108.5 112.4,223.6   "/>
    <polyline fill="none" points="112.4,223.6 227.5,223.6 227.5,108.5   "/>
    <polyline fill="none" points="227.5,108.5 112.4,108.5 112.4,223.6   "/>
    <polyline fill="none" points="112.4,223.6 227.5,223.6 227.5,108.5   "/>
    <g>
        <defs>
            <path id="SVGID_4_" d="M126.1,166c0,24.1,19.6,43.7,43.7,43.7c24.1,0,43.7-19.6,43.7-43.7s-19.6-43.7-43.7-43.7
                C145.8,122.3,126.1,141.9,126.1,166"/>
        </defs>
        <clipPath id="SVGID_5_">
            <use xlink:href="#SVGID_4_"  overflow="visible"/>
        </clipPath>

            <radialGradient id="SVGID_6_" cx="-754.6069" cy="936.9162" r="1.4993" gradientTransform="matrix(29.1716 0 0 -29.1716 22182.9648 27497.334)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FF0005"/>
            <stop  offset="0.101" style="stop-color:#FF0005"/>
            <stop  offset="0.2279" style="stop-color:#ED0005"/>
            <stop  offset="0.4821" style="stop-color:#BF0004"/>
            <stop  offset="0.8372" style="stop-color:#740003"/>
            <stop  offset="0.8801" style="stop-color:#6B0003"/>
            <stop  offset="1" style="stop-color:#6B0003"/>
        </radialGradient>
        <rect x="126.1" y="122.3" clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" width="87.5" height="87.5"/>
    </g>
    <g>
        <path fill="#1A1618" d="M169.9,123.6c23.4,0,42.4,19,42.4,42.4c0,23.4-19,42.4-42.4,42.4c-23.4,0-42.4-19-42.4-42.4
            C127.5,142.6,146.5,123.6,169.9,123.6 M169.9,120.9c-24.9,0-45.1,20.2-45.1,45.1c0,24.9,20.2,45.1,45.1,45.1
            c24.9,0,45.1-20.2,45.1-45.1C215,141.1,194.8,120.9,169.9,120.9"/>
        <path fill="#ED1C24" d="M189.9,166.8c0,10.7-8.7,19.4-19.4,19.4c-10.7,0-19.4-8.7-19.4-19.4c0-10.7,8.7-19.4,19.4-19.4
            C181.2,147.4,189.9,156.1,189.9,166.8"/>
        <path fill="#F15A29" d="M179.5,163.9c0,5.3-4.3,9.6-9.6,9.6c-5.3,0-9.6-4.3-9.6-9.6c0-5.3,4.3-9.6,9.6-9.6
            C175.2,154.3,179.5,158.6,179.5,163.9"/>
        <g opacity="0.3">
            <g>
                <defs>
                    <rect id="SVGID_7_" x="150.4" y="140.1" width="26.7" height="26.7"/>
                </defs>
                <clipPath id="SVGID_8_">
                    <use xlink:href="#SVGID_7_"  overflow="visible"/>
                </clipPath>
                <path clip-path="url(#SVGID_8_)" fill="#FFFFFF" d="M177.1,153.5c0,7.4-6,13.4-13.4,13.4c-7.4,0-13.4-6-13.4-13.4
                    c0-7.4,6-13.4,13.4-13.4C171.1,140.1,177.1,146.1,177.1,153.5"/>
            </g>
        </g>
        <g opacity="0.5">
            <g>
                <defs>
                    <rect id="SVGID_9_" x="165.8" y="153.5" width="8.8" height="8.8"/>
                </defs>
                <clipPath id="SVGID_10_">
                    <use xlink:href="#SVGID_9_"  overflow="visible"/>
                </clipPath>
                <path clip-path="url(#SVGID_10_)" fill="#FFFFFF" d="M174.7,157.9c0,2.4-2,4.4-4.4,4.4s-4.4-2-4.4-4.4c0-2.4,2-4.4,4.4-4.4
                    S174.7,155.4,174.7,157.9"/>
            </g>
        </g>
        <g opacity="0.5">
            <g>
                <defs>
                    <rect id="SVGID_11_" x="185.7" y="153.5" width="8.8" height="8.8"/>
                </defs>
                <clipPath id="SVGID_12_">
                    <use xlink:href="#SVGID_11_"  overflow="visible"/>
                </clipPath>
                <path clip-path="url(#SVGID_12_)" fill="#FFFFFF" d="M194.6,157.9c0,2.4-2,4.4-4.4,4.4c-2.4,0-4.4-2-4.4-4.4
                    c0-2.4,2-4.4,4.4-4.4C192.6,153.5,194.6,155.4,194.6,157.9"/>
            </g>
        </g>
        <g opacity="0.1">
            <g>
                <defs>
                    <rect id="SVGID_13_" x="179.4" y="171" width="17.9" height="20.8"/>
                </defs>
                <clipPath id="SVGID_14_">
                    <use xlink:href="#SVGID_13_"  overflow="visible"/>
                </clipPath>
                <path clip-path="url(#SVGID_14_)" fill="#FFEAEA" d="M180.5,191.3c-0.2,0-0.4-0.1-0.5-0.3c-0.1-0.2,0-0.5,0.2-0.7
                    c6.4-4.9,11.9-11.4,15.6-18.5c0.1-0.2,0.3-0.3,0.5-0.3c0,0,0.1,0,0.1,0c0.2,0.1,0.4,0.3,0.4,0.5c0,0.7-0.1,1.3-0.2,1.9
                    c-1.4,7.8-8.4,15.3-15.9,17.2C180.6,191.3,180.5,191.3,180.5,191.3"/>
                <path clip-path="url(#SVGID_14_)" fill="#FFEAEA" d="M196.2,172.1L196.2,172.1 M196.2,172.1c0,0.6-0.1,1.2-0.2,1.9
                    c-1.4,7.7-8.3,15-15.5,16.8C186.9,185.8,192.5,179.3,196.2,172.1 M196.2,171c0,0-0.1,0-0.1,0c-0.2,0-0.4,0.1-0.5,0.2
                    c-0.1,0.1-0.2,0.1-0.2,0.2c0,0-0.1,0.1-0.1,0.2c-3.6,7-9.1,13.4-15.4,18.3c-0.4,0.3-0.5,0.9-0.3,1.3c0.2,0.4,0.6,0.6,1,0.6
                    c0.1,0,0.2,0,0.3,0c7.7-1.9,14.8-9.6,16.3-17.6c0.1-0.6,0.2-1.2,0.2-1.9c0-0.1,0-0.1,0-0.2C197.3,171.5,196.8,171.1,196.2,171
                    C196.3,171,196.2,171,196.2,171"/>
            </g>
        </g>
    </g>
</g>
</svg>

SVG在IE中显示交叉符号

0 个答案: