Форма браузера IE11 переполняет элемент SVG

Я работаю над SVG и пытаюсь создать полукруг, но вместо этого браузер IE11 создает полный круг.

Мой код такой:

<svg viewBox = "0 0 80 40" class = "gauge">
  <circle 
    cx = "40"
    cy = "40"
    r = "37"
    fill = "transparent"
    stroke = "#d2d3d4"
    stroke-width = "6"></circle>
</svg>

Как я могу отобразить полукруг в IE11? В других браузерах работает нормально. Пожалуйста, найдите изображение ниже для получения дополнительной справки.

В IE11:

Форма браузера IE11 переполняет элемент SVG

В Хроме:

Форма браузера IE11 переполняет элемент SVG

overflow = "hidden" в элементе <svg>?

— 11.04.2019 14:58

html internet-explorer svg

11.04.2019 14:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

241

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Быстрым решением было бы добавить overflow:hidden; к svg следующим образом:

svg {
  overflow: hidden;
}

<svg viewBox = "0 0 80 40" class = "gauge">
  <circle 
    cx = "40" 
    cy = "40" 
    r = "37" 
    fill = "transparent" 
    stroke = "#d2d3d4" 
    stroke-width = "6"></circle>
</svg>

В зависимости от вашего варианта использования «более чистым» решением было бы построить свой полукруг с путем и команда дуги :

<svg viewBox = "0 0 80 40" class = "gauge">
  <path d = "M3 40 A37 37 0 0 1 77 40"
    fill = "transparent" 
    stroke = "#d2d3d4" 
    stroke-width = "6" />
</svg>

Таким образом, вы уверены, что ничего не переполняет элемент svg.

11.04.2019 14:58