Question

我在使用Illustrator制作的svg时遇到了很多麻烦。这是Illustrator给我的代码。

<svg version="1.1" class="svg active" id="vertical_lines_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216.4 64.4" style="enable-background:new 0 0 216.4 64.4;" xml:space="preserve">
    <use xlink:href="#I" id="svgCanvas"/>
    <pattern  x="92.6" y="18.1" width="28.3" height="28.3" patternUnits="userSpaceOnUse" id="New_Pattern" viewBox="0 -28.3 28.3 28.3" style="overflow:visible;">
        <g id="XMLID_484_">
            <polygon id="XMLID_507_" class="st0" points="0,-28.3 28.3,-28.3 28.3,0 0,0      "/>
            <polygon id="XMLID_506_" class="st4" points="7.1,0 0,0 0,-28.3 7.1,-28.3        "/>
            <polygon id="XMLID_505_" class="st1" points="14.2,0 7.1,0 7.1,-28.3 14.2,-28.3      "/>
            <polygon id="XMLID_504_" class="st4" points="21.3,0 14.2,0 14.2,-28.3 21.3,-28.3        "/>
            <polygon id="XMLID_503_" class="st1" points="28.3,0 21.3,0 21.3,-28.3 28.3,-28.3        "/>
        </g>
   </pattern>
   <g id="XMLID_131_">
   <pattern  id="XMLID_28" xlink:href="#New_Pattern" patternTransform="matrix(1 0 0 1 -40.8688 -2.6535)">
   </pattern>
   <path id="XMLID_132_" class="st2" fill="url(#XMLID_28_)" d="M74.2,39.6c8.1,3.2,20.8,4.9,33.8,4.8c13,0.1,25.8-1.6,33.8-4.8c8.1,3.2,20.8,4.9,33.8,4.8
                                          c13,0.1,25.8-1.6,33.9-4.9c-0.1-1-0.5-3.4-1-6.5c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2c-2-7.6-2.9-11.1-7.5-11.1h-40.4
                                          c-6.3,0-7.2,2.6-8.8,8.9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9c-0.3,1.9-0.6,4-0.8,6.1c-0.2-1.2-0.5-3.4-1-6
                                          c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2c-2-7.6-2.9-11.1-7.5-11.1H88.8c-6.3,0-7.2,2.6-8.8,8.9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9
                                          c-0.3,1.9-0.6,4-0.8,6.1c-0.2-1.2-0.5-3.4-1-6c-1.1-6.8-2.8-16.9-4.1-21.7l-0.1-0.2C67,3.5,66.1,0,61.5,0H21.2
                                          C14.9,0,14,2.6,12.4,9l-0.5,2.1c-1.3,5.1-3.1,12.3-4.6,21.9C7,35,6.7,37.2,6.5,39.5c8.1,3.3,20.9,4.9,33.9,4.9
                                          C53.4,44.5,66.1,42.8,74.2,39.6z"/>
    <pattern  id="XMLID_29" xlink:href="#New_Pattern" patternTransform="matrix(1 0 0 1 -40.8688 -2.6535)">
    </pattern>
    <path id="XMLID_322_" class="st3" fill="url(#XMLID_29_)" d="M211,45.6c-0.3,0-0.6-0.1-0.8-0.1c-10.6,4.9-39.7,7.1-63.5,1.5c-1.6-0.4-3.2-0.8-4.7-1.2
                                          c-1.6,0.7-3.5,1.3-5.7,1.8C122.9,50.9,99.1,51.7,79,47c-1.6-0.4-3.2-0.8-4.7-1.2c-1.6,0.7-3.5,1.3-5.7,1.8
                                          C54,51.2,26.9,51.9,5.9,45.5c-0.3,0-0.6,0-0.8,0.1c-2.7,0.4-6.2,3.2-4.6,4.3c3.4,2.2,8.7,3.9,15,5.1v9.3h49.9v-9.3
                                          c3.3-0.6,6.3-1.4,8.9-2.3c2.6,0.9,5.6,1.7,8.9,2.3v9.3H133v-9.3c3.3-0.6,6.3-1.4,8.9-2.3c2.6,0.9,5.6,1.7,8.9,2.3v9.3h49.9v-9.3
                                          c6.3-1.2,11.6-2.9,15-5.1C217.2,48.8,213.8,46,211,45.6z"/>
    </g>
  </svg><!--end vertical_lines_svg-->

我必须使用jQuery更改模式.st4和.st1的颜色，在FF和Chrome中一切都很棒，但在IE和Safari上没有任何渲染。我尝试了一切，并没有设法解决它。任何想法为什么会这样，我该如何解决？

Answer 1

好的，我发现问题是你不能对tag中的viewBox属性赋值。这将使svg在IE中消失

Safari和IE中的SVG渲染

1 个答案: