无法在页面上显示多个svg

时间:2016-06-13 05:27:19

标签: svg

不确定我是否误解了svgs的基本内容,但当我尝试在页面上添加多个svg时,只有第一个呈现。下面的svgs是从Sketch导出的(我正在努力去除绒毛)。 svg在dom中(我可以在chrome检查器中看到它)但是没有任何东西在屏幕上显示第二个svg。如果我交换订单,那么只会显示第一个订单。

<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <title>LinkedIn</title>
    <desc>Created with Sketch.</desc>
    <defs>
      <path d="M404,1613.54534 L404,1620.20005 L400.142017,1620.20005 L400.142017,1613.99103 C400.142017,1612.43128 399.584002,1611.3668 398.18754,1611.3668 C397.121518,1611.3668 396.487128,1612.08418 396.208036,1612.77812 C396.106259,1613.0262 396.080062,1613.3715 396.080062,1613.71876 L396.080062,1620.20005 L392.220782,1620.20005 C392.220782,1620.20005 392.272758,1609.68401 392.220782,1608.59447 L396.079685,1608.59447 L396.079685,1610.23951 C396.07186,1610.25182 396.06169,1610.26508 396.054325,1610.27701 L396.079685,1610.27701 L396.079685,1610.23951 C396.592378,1609.44986 397.507994,1608.32182 399.557427,1608.32182 C402.096537,1608.32178 404,1609.98055 404,1613.54534 L404,1613.54534 Z M388.18381,1603 C386.863556,1603 386,1603.86598 386,1605.00478 C386,1606.11876 386.838572,1607.01102 388.132587,1607.01102 L388.158366,1607.01102 C389.504191,1607.01102 390.341172,1606.11893 390.341172,1605.00478 C390.315812,1603.86598 389.504191,1603 388.18381,1603 L388.18381,1603 Z M386.229207,1620.20005 L390.087023,1620.20005 L390.087023,1608.59447 L386.229207,1608.59447 L386.229207,1620.20005 L386.229207,1620.20005 Z" id="path-1"></path>
      <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
        <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.239215686   0 0 0 0 0.490196078  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
      </filter>
    </defs>
    <g id="1.-Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="1440/1a.-Homepage" transform="translate(-386.000000, -1603.000000)">
        <g id="LinkedIn">
          <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
          <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
          <use fill="black" fill-opacity="1" xlink:href="#path-1"></use>
        </g>
      </g>
    </g>
  </svg>


  <svg width="10px" height="19px" viewBox="0 0 10 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <title>Shape</title>
    <desc>Created with Sketch.</desc>
    <defs>
      <path d="M323.219245,1604.00369 L320.921439,1604 C318.339932,1604 316.671649,1605.7116 316.671649,1608.36076 L316.671649,1610.37137 L314.361308,1610.37137 C314.161667,1610.37137 314,1610.53322 314,1610.73286 L314,1613.64599 C314,1613.84563 314.161851,1614.0073 314.361308,1614.0073 L316.671649,1614.0073 L316.671649,1621.35807 C316.671649,1621.55771 316.833316,1621.71938 317.032957,1621.71938 L320.047295,1621.71938 C320.246936,1621.71938 320.408603,1621.55753 320.408603,1621.35807 L320.408603,1614.0073 L323.109931,1614.0073 C323.309572,1614.0073 323.471239,1613.84563 323.471239,1613.64599 L323.472345,1610.73286 C323.472345,1610.637 323.434186,1610.5452 323.366533,1610.47736 C323.29888,1610.40952 323.20671,1610.37137 323.110853,1610.37137 L320.408603,1610.37137 L320.408603,1608.66695 C320.408603,1607.84774 320.60382,1607.43187 321.670968,1607.43187 L323.218877,1607.43132 C323.418333,1607.43132 323.58,1607.26947 323.58,1607.07001 L323.58,1604.36499 C323.58,1604.16572 323.418518,1604.00406 323.219245,1604.00369 L323.219245,1604.00369 Z" id="path-1"></path>
      <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
        <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.239215686   0 0 0 0 0.490196078  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
      </filter>
    </defs>
    <g id="1.-Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="1440/1a.-Homepage" transform="translate(-314.000000, -1604.000000)">
        <g id="Shape">
          <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
          <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
          <use fill="black" fill-opacity="1" xlink:href="#path-1"></use>
        </g>
      </g>
    </g>
  </svg>

0 个答案:

没有答案
相关问题