IE11 по умолчанию SVG имеет ширину 100% - как изменить этот код? - PullRequest
Новая
       30

IE11 по умолчанию SVG имеет ширину 100% - как изменить этот код?

0 голосов
/ 30 апреля 2018

Мне не известны альтернативы добавлению width: 1em в SVG для решения проблемы IE11 (см. Комментарий в коде). Играйте с кодом в коде ручки. Цени любую помощь! Спасибо:)

https://codepen.io/ambrwlsn90/pen/zjZYpb

<div class="box">
    <span class="handle--draggable">
      <svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 10 32">
        <circle cx="2" cy="2" r="2" />
        <circle cx="8" cy="2" r="2" />
        <circle cx="2" cy="9" r="2" />
        <circle cx="8" cy="9" r="2" />
        <circle cx="2" cy="16" r="2" />
        <circle cx="8" cy="16" r="2" />
        <circle cx="2" cy="23" r="2" />
        <circle cx="8" cy="23" r="2" />
        <circle cx="2" cy="30" r="2" />
        <circle cx="8" cy="30" r="2" />
      </svg>
    </span>
</div>

.box {
  position: relative;
  width: 400px;
  height: 100px;
  border: 3px solid black;
  background-color: white;
  top: 50px;
  left: 100px;
  padding: 15px;
  line-height: 1.5em;
}

.handle--draggable {
  position: absolute;
  cursor: move;
  left: -26px;
  top: -3.5px;
}

/**
  * 1. Magic number added to fix visual bug in IE: 11
  */

.handle--icon {
  fill: black;
  background-color: grey;
  padding: 3.5px;
  height: 37px;
  width: 1em; /* 1. */
  position: relative;

  &:hover {
    left: -5px;
    border-right: 5px solid grey;
  }
}

1 Ответ

0 голосов
/ 01 мая 2018

Тэгу SVG нужны некоторые базовые атрибуты, чтобы они отображались как ожидалось. Если вы прочитаете документацию W3C по внешнему тегу svg, вы найдете ответ:

Для встроенных элементов "svg" - ширина прямоугольной области, в которую помещается элемент "svg". Отрицательное значение - ошибка (см. Обработка ошибок). Нулевое значение отключает рендеринг элемента. Если атрибут не указан, эффект будет таким, как если бы было указано значение «100%».

Таким образом, вам нужно будет указать атрибуты width и height тега SVG, иначе он будет отображаться с шириной 100%.

Открывающий тег svg должен выглядеть следующим образом: 

<svg class="handle--icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 32" width=“10” height=“32”>

Тогда SVG будет выглядеть таким же перекрестным браузером.

Имея атрибуты width и height, определенные для вашего элемента svg, вы можете отбросить отвратительный взлом Internet Explorer 11.

...