Не отображаются svg в списке

269
27 ноября 2017, 16:46

Собственно, обычный список с вставленными svg иконками. Отображается только первая иконка в списке(какую svg не подставь). В чем может быть проблема?

body{ 
background: #777; 
}
<ul> 
  <li> 
    <a href="#"> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13.094" height="16.125" viewBox="0 0 13.094 16.125"> 
                        <defs> 
                            <style> 
                                .cls-1 { 
                                    fill: #fff; 
                                    fill-rule: evenodd; 
                                    filter: url(#filter); 
                                } 
                            </style> 
                            <filter id="filter" x="859" y="15.969" width="13.094" height="16.125" filterUnits="userSpaceOnUse"> 
                                <feFlood result="flood" flood-color="#d4d4d4"/> 
                                <feComposite result="composite" operator="in" in2="SourceGraphic"/> 
                                <feBlend result="blend" in2="SourceGraphic"/> 
                            </filter> 
                        </defs> 
                        <path id="evernote" class="cls-1" d="M867.969,28.969V28.041a14.518,14.518,0,0,0-1.913,0,1.475,1.475,0,0,0-.791.472,2.117,2.117,0,0,0-.229.889c-0.013.205-.018,0.538-0.018,0.712a5.484,5.484,0,0,0,.068.92,1.957,1.957,0,0,0,.151.521,0.42,0.42,0,0,0,.1.14,0.768,0.768,0,0,0,.175.118,1.812,1.812,0,0,0,.438.133,15.878,15.878,0,0,0,4.368-.005,1.343,1.343,0,0,0,.584-0.461,4.362,4.362,0,0,0,.81-1.657,26.02,26.02,0,0,0,.344-5.668c0-1.874-.142-3.628-0.213-4.563-0.077-1-.077-1.53-1.409-1.646l-0.554-.072s-3.067-.541-3.144-0.827a1.665,1.665,0,0,0-.277-0.587,1.042,1.042,0,0,0-.38-0.312A1.892,1.892,0,0,0,865.528,16c-0.212-.029-0.817-0.029-0.967-0.027a0.551,0.551,0,0,0-.576.544c0,0.48,0,3.273,0,3.755a1.672,1.672,0,0,1-.109.63,1.905,1.905,0,0,1-.688.107c-0.147.056-3.7,0-3.7,0a0.651,0.651,0,0,0-.456.883,23.282,23.282,0,0,0,.664,2.415,8.311,8.311,0,0,0,.477,1.412,1.73,1.73,0,0,0,.3.467,0.742,0.742,0,0,0,.186.123,2.519,2.519,0,0,0,.307.125,7.689,7.689,0,0,0,.859.224c0.646,0.135,1.392.239,1.972,0.3,0.386,0.041.7,0.063,0.856,0.063h0a0.21,0.21,0,0,0,.121-0.037,0.357,0.357,0,0,0,.1-0.115,1.324,1.324,0,0,0,.139-0.429c0.064-.346.074-0.765,0.1-1.036a1.219,1.219,0,0,1,.029-0.2,0.288,0.288,0,0,1,.029-0.078A0.144,0.144,0,0,1,865.2,25.1a0.1,0.1,0,0,1,.061-0.021h0a0.135,0.135,0,0,1,.062.016,0.21,0.21,0,0,1,.044.034,0.527,0.527,0,0,1,.068.09c0.043,0.069.089,0.16,0.146,0.262a2.291,2.291,0,0,0,.506.655,1.821,1.821,0,0,0,.594.493c0.329,0.083.7,0.135,1.052,0.193a15.1,15.1,0,0,1,1.705.233,0.906,0.906,0,0,1,.416.314,1.264,1.264,0,0,1,.1.412c0.034,0.345.067,0.727,0.067,1.084a3.405,3.405,0,0,1-.058.679,0.991,0.991,0,0,1-.228.5,11.99,11.99,0,0,1-2.743-.028,0.734,0.734,0,0,1-.21-0.759c0.094-.437.75-0.312,0.75-0.312Zm0.7,1.612h0m-0.908-1.118h0m-4.821-13.494,0.024,3.2a0.723,0.723,0,0,1-.671.815c-0.719,0-3.3-.024-3.3-0.024Zm6.923,6.509s-0.449-1.376-1.346-1.436-2,1.735-1.226,1.855,0.478-.18,1.076-0.209a6.76,6.76,0,0,1,1.287.209C870.106,22.926,869.867,22.627,869.867,22.477Z" transform="translate(-859 -15.969)"/> 
                    </svg> 
 
    </a> 
  </li> 
  <li> 
    <a href="#"> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="13.094" viewBox="0 0 16 13.094"> 
                        <defs> 
                            <style> 
                                .cls-1 { 
                                    fill: #fff; 
                                    fill-rule: evenodd; 
                                    filter: url(#filter); 
                                } 
                            </style> 
                            <filter id="filter" x="882.063" y="17.906" width="16" height="13.094" filterUnits="userSpaceOnUse"> 
                                <feFlood result="flood" flood-color="#d4d4d4"/> 
                                <feComposite result="composite" operator="in" in2="SourceGraphic"/> 
                                <feBlend result="blend" in2="SourceGraphic"/> 
                            </filter> 
                        </defs> 
                        <path id="twitter_bird" data-name="twitter bird" class="cls-1" d="M882.458,23.343c0,1.585,1.367,2.4,2.863,2.7a2.074,2.074,0,0,1-1.414.244c0.416,1.3,1.592,1.745,3.024,1.771a6.481,6.481,0,0,1-4.094,1.152,6.609,6.609,0,0,1-.78-0.046,9.618,9.618,0,0,0,5.014,1.842,8.516,8.516,0,0,0,8.937-8.79c0-.142,0-0.283-0.01-0.423a8.811,8.811,0,0,0,2.055-1.756,6.779,6.779,0,0,1-1.932.092,2.68,2.68,0,0,0,1.6-2.106,7.984,7.984,0,0,1-2.237,1.027A3.385,3.385,0,0,0,893.1,17.9a3.245,3.245,0,0,0-3,3.484,2.5,2.5,0,0,0,.054.652c-2.719-.136-5.6-1.028-7.217-3.007a3.261,3.261,0,0,0-.443,1.644,3.567,3.567,0,0,0,1.748,2.722A2.834,2.834,0,0,1,882.458,23.343Z" transform="translate(-882.063 -17.906)"/> 
                    </svg> 
 
    </a> 
  </li> 
  <li> 
    <a href=""> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> 
                        <defs> 
                            <style> 
                                .cls-1 { 
                                    fill: #fff; 
                                    fill-rule: evenodd; 
                                    filter: url(#filter); 
                                } 
                            </style> 
                            <filter id="filter" x="905" y="16.031" width="16" height="16" filterUnits="userSpaceOnUse"> 
                                <feFlood result="flood" flood-color="#d4d4d4"/> 
                                <feComposite result="composite" operator="in" in2="SourceGraphic"/> 
                                <feBlend result="blend" in2="SourceGraphic"/> 
                            </filter> 
                        </defs> 
                        <path id="pinterest" class="cls-1" d="M912.991,16.037a8,8,0,1,1-8,8A8,8,0,0,1,912.991,16.037ZM909.928,31.73a8.9,8.9,0,0,1,.018-2.111c0.161-.787,1.091-4.579,1.091-4.579a2.73,2.73,0,0,1-.268-1.628,1.772,1.772,0,0,1,1.52-1.7c0.734,0,1.4.8,0.948,2.2a6.469,6.469,0,0,0-.572,2.54,1.2,1.2,0,0,0,1.324.93c0.8-.018,2.415-0.895,2.45-4.168a2.986,2.986,0,0,0-3.273-3.184,3.955,3.955,0,0,0-3.685,2.4c-0.895,2.343.5,3.184,0.5,3.184l-0.376,1.02a0.333,0.333,0,0,1-.519.036c-0.34-.25-1.717-1.037-1.323-4.007s3.7-4.043,5.438-4.043,5.4,1.02,5.169,5.188-3.2,4.9-4.382,4.9a2.584,2.584,0,0,1-1.9-.93l-0.375,1.807a5.84,5.84,0,0,1-1.127,2.29Z" transform="translate(-905 -16.031)"/> 
                    </svg> 
 
    </a> 
  </li> 
  <li> 
    <a href=""> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="15.938" viewBox="0 0 16 15.938"> 
                        <defs> 
                            <style> 
                                .cls-1 { 
                                    fill: #fff; 
                                    fill-rule: evenodd; 
                                    filter: url(#filter); 
                                } 
                            </style> 
                            <filter id="filter" x="928" y="16.063" width="16" height="15.938" filterUnits="userSpaceOnUse"> 
                                <feFlood result="flood" flood-color="#d4d4d4"/> 
                                <feComposite result="composite" operator="in" in2="SourceGraphic"/> 
                                <feBlend result="blend" in2="SourceGraphic"/> 
                            </filter> 
                        </defs> 
                        <path id="linked_in" data-name="linked in" class="cls-1" d="M931.428,16.047h9.146A3.422,3.422,0,0,1,944,19.469v9.107A3.422,3.422,0,0,1,940.574,32h-9.146a3.422,3.422,0,0,1-3.422-3.422V19.469A3.422,3.422,0,0,1,931.428,16.047ZM931.984,20a1.022,1.022,0,1,1-1.14,1.016A1.084,1.084,0,0,1,931.984,20ZM931,22.969h2V29h-2V22.969Zm3.062-.062h1.876v6.063h-1.876V22.906Zm1.5,1.469a2.8,2.8,0,0,1,2.375-1.781c1.688,0,2.063.938,2.063,2.719v3.625h-2V25.125a0.892,0.892,0,0,0-1-1.157c-1.312,0-1.062,1.313-1.062,2.25S935.562,24.375,935.562,24.375Z" transform="translate(-928 -16.063)"/> 
                    </svg> 
 
    </a> 
  </li> 
  <li> 
    <a href=""> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> 
                        <defs> 
                            <style> 
                                .cls-1 { 
                                    fill: #fff; 
                                    fill-rule: evenodd; 
                                    filter: url(#filter); 
                                } 
                            </style> 
                            <filter id="filter" x="951" y="16" width="16" height="16" filterUnits="userSpaceOnUse"> 
                                <feFlood result="flood" flood-color="#d4d4d4"/> 
                                <feComposite result="composite" operator="in" in2="SourceGraphic"/> 
                                <feBlend result="blend" in2="SourceGraphic"/> 
                            </filter> 
                        </defs> 
                        <path id="Facebook" class="cls-1" d="M953,16h12a2,2,0,0,1,2,2V30a2,2,0,0,1-2,2H953a2,2,0,0,1-2-2V18A2,2,0,0,1,953,16Zm10.977,5-0.011-1.977c-0.7,0-.5-0.035-1.231-0.035a3.257,3.257,0,0,0-1.6.343,1.684,1.684,0,0,0-.855.871,3.43,3.43,0,0,0-.262,1.544V22h-1.01l-0.032,1.961h1.011v5.036h2V23.958h1.824L964.058,22h-2.029a1.037,1.037,0,0,1,.149-0.9A7.329,7.329,0,0,1,963.977,21Z" transform="translate(-951 -16)"/> 
                    </svg> 
 
    </a> 
  </li> 
  <li> 
    <a href=""> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> 
                        <defs> 
                            <style> 
                                .cls-1 { 
                                    fill: #fff; 
                                    fill-rule: evenodd; 
                                    filter: url(#filter); 
                                } 
                            </style> 
                            <filter id="filter" x="974" y="16" width="16" height="16" filterUnits="userSpaceOnUse"> 
                                <feFlood result="flood" flood-color="#d4d4d4"/> 
                                <feComposite result="composite" operator="in" in2="SourceGraphic"/> 
                                <feBlend result="blend" in2="SourceGraphic"/> 
                            </filter> 
                        </defs> 
                        <path id="delicious" class="cls-1" d="M976,16h12a2,2,0,0,1,2,2V30a2,2,0,0,1-2,2H976a2,2,0,0,1-2-2V18A2,2,0,0,1,976,16Zm1,1.969h4a1,1,0,0,1,1,1V23a1,1,0,0,1-1,1h-4a1,1,0,0,1-1-1V18.969A1,1,0,0,1,977,17.969ZM983,24h4a1,1,0,0,1,1,1v4a1,1,0,0,1-1,1h-4a1,1,0,0,1-1-1V25A1,1,0,0,1,983,24Z" transform="translate(-974 -16)"/> 
                    </svg> 
 
    </a> 
  </li> 
</ul>

READ ALSO
Как правильно сверстать секцию

Как правильно сверстать секцию

Подскажите как правильно сверстать данную секциюСхему вырезал картинкой, ставлю ее бекграундом и под нее выравниваю текст, но естественно...

197
изменить цвет заблокированной кнопки

изменить цвет заблокированной кнопки

Хочу чтобы при наведении на нее изменялся цвет (кнопка заблокирована), делаю так:

294
Свой css для сайтов в браузере

Свой css для сайтов в браузере

Подскажите пожалуйста расширение или что - то подобное, что сможет сохранить мои личные css для сторонних сайтовК примеру у Вконтакте background:...

279