SVG искажается в IE

Question

Я пытаюсь встроить SVG в веб-страницу. Он отлично работает в Chrome и Firefox, но полностью искажается в IE. Используйте приведенный ниже блок кода svg в качестве справки:

<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path d="M21 17.625h-3.375c-.619 0-1.125.506-1.125 1.125v3.375c0 .619.506 1.125 1.125 1.125H21c.619 0 1.125-.506 1.125-1.125V18.75c0-.619-.506-1.125-1.125-1.125zm0-11.25V7.5h-9V6.375c0-.619-.506-1.125-1.125-1.125S9.75 5.756 9.75 6.375V7.5H8.625a2.24 2.24 0 00-2.239 2.25L6.375 25.5a2.25 2.25 0 002.25 2.25h15.75a2.257 2.257 0 002.25-2.25V9.75a2.257 2.257 0 00-2.25-2.25H23.25V6.375c0-.619-.506-1.125-1.125-1.125S21 5.756 21 6.375zM23.25 25.5H9.75a1.128 1.128 0 01-1.125-1.125v-11.25h15.75v11.25c0 .619-.506 1.125-1.125 1.125z" id="a"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path fill="#FFF" d="M-134-821h1400V297H-134z"/>
    <path fill="#FFF" d="M-134-821h1400V204H-134z"/>
    <path fill="#FFF" d="M-134-821h1400V204H-134z"/>
    <circle fill="#269F96" cx="16.5" cy="16.5" r="16.5"/>
    <use fill="#FFF" fill-rule="nonzero" xlink:href="#a"/>
  </g>
</svg>

Answer 1

Таким образом, некоторым браузерам сложно использовать теги <use> и <def>. Чтобы исправить это, вы можете иногда «сгладить» изображение в графическом редакторе. Удалите все папки, содержащие слои, et c et c.

Вы также можете исправить это вручную. Это несложно, и это поможет вам изучить синтаксис SVG:

1. Начните с просмотра id, указанного в атрибуте href <use ... xlink:href="#a">. Как видите, это a
2. Теперь мы ищем тег с id="a". В данном случае это путь внутри тега <def>. Это вполне ожидаемо, поскольку def означает «определить для дальнейшего использования».
3. Удалите теги <def>, но оставьте <path id="a" ...> и все его внутренности.
4. Переместите все атрибуты (кроме xlink:href="#a") в теге <use> (fill и fill-rule) элемента path#id="a".
5. Удалите тег <use>.
6. поместите все <path> теги внутри одного <g> тег
7. В этом случае другие теги заполнения бессмысленны (артефакты могут быть из редактора). Это просто белые квадраты, так что вы можете избавиться от них.
8. Я поставил круг первым, так как он рендерится по порядку сверху и снизу. Таким образом, визуально нижний слой должен быть кругом, верхний слой - это какой-то рисунок в белом цвете.

Конечный результат должен быть примерно таким:

• Нет def или use теги.
• Все фигуры внутри тега root g
• Удалены бессмысленные фигуры.

.

<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#269F96" cx="16.5" cy="16.5" r="16.5"/>
    <path fill="#FFF" fill-rule="nonzero" d="M21 17.625h-3.375c-.619 0-1.125.506-1.125 1.125v3.375c0 .619.506 1.125 1.125 1.125H21c.619 0 1.125-.506 1.125-1.125V18.75c0-.619-.506-1.125-1.125-1.125zm0-11.25V7.5h-9V6.375c0-.619-.506-1.125-1.125-1.125S9.75 5.756 9.75 6.375V7.5H8.625a2.24 2.24 0 00-2.239 2.25L6.375 25.5a2.25 2.25 0 002.25 2.25h15.75a2.257 2.257 0 002.25-2.25V9.75a2.257 2.257 0 00-2.25-2.25H23.25V6.375c0-.619-.506-1.125-1.125-1.125S21 5.756 21 6.375zM23.25 25.5H9.75a1.128 1.128 0 01-1.125-1.125v-11.25h15.75v11.25c0 .619-.506 1.125-1.125 1.125z"/>
  </g>
</svg>