SVG-sprite in IE11

[Schamil74]

Всем привет!

Столкнулся проблемой отображения svg спрайтов в ie11.

Есть два варианта:

В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Hаботает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg.

Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял), но реагирует на css, причем не отображаются только некоторые иконки.

 

Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например: 

svg.contacts__flag(width="60", height="90")
use(xlink:href="#flag")

[npofopr]

Это разве спрайтом называется? Я так понимаю, вы просто инлайново вставляете svg?

Я делаю так:

<svg xmlns="http://www.w3.org/2000/svg" style="border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important;"
        class="root-svg-symbols-element">
            <symbol id="facebook" viewBox="0 0 19 32">
                <path d="M17.125.214v4.714h-2.804q-1.536 0-2.071.643T11.714 7.5v3.375h5.232l-.696 5.286h-4.536v13.554H6.25V16.161H1.696v-5.286H6.25V6.982q0-3.321 1.857-5.152T13.053 0q2.625 0 4.071.214z" />
            </symbol>
            <symbol id="file-excel" viewBox="0 0 32 32">
                <path d="M23.22 12h-4.228L16 16.407 13.008 12H8.78l5.068 7.577L8.13 28H16v-2.862h-1.567L16 22.794l3.481 5.205h4.389l-5.718-8.423 5.068-7.577z" />
                <path d="M28.681 7.159c-.694-.947-1.662-2.053-2.724-3.116s-2.169-2.03-3.116-2.724C21.229.137 20.448 0 20 0H4.5A2.503 2.503 0 0 0 2 2.5v27C2 30.878 3.121 32 4.5 32h23c1.378 0 2.5-1.122 2.5-2.5V10c0-.448-.137-1.23-1.319-2.841zm-4.138-1.702A27.334 27.334 0 0 1 26.811 8H22V3.189a27.334 27.334 0 0 1 2.543 2.268zM28 29.5c0 .271-.229.5-.5.5h-23a.507.507 0 0 1-.5-.5v-27c0-.271.229-.5.5-.5H20v7a1 1 0 0 0 1 1h7v19.5z"
                />
            </symbol>
</svg>

<div class="icon">
    <svg class="icon_i" width="27px" height="32px">
        <use xlink:href="#file-exel"></use>
    </svg>
</div>

Стили примерно такие:

.icon {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  overflow: hidden;
  fill: currentColor;
}
.icon_i {
  width: 100%;
  height: 100%;
  background: inherit;
  stroke-width: 0;
  stroke: currentColor;
  fill: inherit;
  pointer-events: none;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  vertical-align: top;
}

Ну и для .icon и задаю цвет. Или оно и от родители не плохо его наследует.

И svg лучше подчистить будет ещё,
например https://jakearchibald.github.io/svgomg/
Хотя последний AI тоже вроде это делает.

[Schamil74]

В продолжение 

 

Ссылку на сайт я давал.  Не пойму, почему топик так отображается неверно. Сравните их. Который свежее более полный. Через инспектор не умею это смотреть. 

Да, какая-то ошибка была. Эту тему можно удалить.

 

Edited April 11, 2017 by Schamil74

[Schamil74]

Разобрался! Дело в том, что нужно было удалить содержание тега <g>, а именно атрибуты transform.