CSS / SVG background image Проблема выравнивания IE11 - PullRequest
Новая
       54

CSS / SVG background image Проблема выравнивания IE11

0 голосов
/ 28 сентября 2018

Надеюсь, что кто-нибудь может помочь мне с проблемой выравнивания - я не могу понять, это проблема с CSS или SVG.

Я пытаюсь заменить стандартную кнопку "Play" в (На основе HTML) проигрыватель видео Brightcove с использованием предоставленного поля «Пользовательский CSS».Сначала я отключаю встроенную кнопку с помощью display:none в классе ee-components-play-button-svg, а затем с помощью CSS добавляю нужную кнопку с помощью элемента :after.

Проблема в том, что я не могу понять, почемув IE11 кнопка появляется дальше вниз и справа от центра.Я пробовал исправления, предложенные в других местах на SO, но безрезультатно:

  • Добавление ширины и высоты к SVG
  • Добавление атрибута preserveAspectRatio

I 'Мне трудно отлаживать, потому что инспектор кода IE не позволяет мне специально выбирать и видеть свойства псевдоэлементов.

Вы можете увидеть реализацию ниже.Я только показываю пользовательский CSS, который я добавил, и URL SVG декодируется для удобства чтения, но в противном случае кодируется, чтобы обойти ошибку отображения IE с не кодированными URL-адресами (фактический код в Pen): https://codepen.io/cyberseraphic/pen/XxWKgM

.ee-components-play-button-svg {
    display: none;
}

.ee-components-play-button:after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg version='1.1' id='arwork' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'><g><g><path fill='#ffd024' d='M88,107.2L384,256L88,404.8V107.2 M56,56v400l400-200L56,56L56,56z'/></g></g></svg>");
    width: 17%;
    height: 30%;
    background-repeat: no-repeat;
    transition: transform .2s ease-in;
}

.ee-components-play-button:hover:after {
    transform: scale(1.1);
}
<div class="ee-components-play-button" data-countdown="false" data-now-playing="false" data-watched="false">
  <div aria-hidden="true" class="ee-components-style-overlayBanner ee-components-play-button-watched"><span>✔</span>
    <!-- react-text: 45 -->
    <!-- /react-text -->
    <!-- react-text: 46 -->Watched
    <!-- /react-text -->
  </div>
  <div aria-hidden="true" class="ee-components-style-nowPlaying ee-components-play-button-now-playing">Now Playing</div><svg viewBox="0 0 100 100" class="ee-components-play-button-svg"><g class="ee-components-style-playButton ee-components-play-button-group" data-ad-playing="false" tabindex="-1" aria-hidden="true" aria-label="play video" aria-disabled="false" role="button"><g class="ee-components-play-button-countdown"><circle cx="50" cy="50" r="45" class="ee-components-play-button-track"></circle><circle cx="50" cy="50" r="45" transform="rotate(-90 50 50)" class="ee-components-play-button-runner" style="stroke-dasharray: 0, 283;"></circle><path d="M 35 35 h 10 v 30 h -10 Z m 20 0 h 10 v 30 h -10 Z" width="30" height="30" class="ee-components-play-button-pause"></path><text x="50" y="50" text-anchor="middle" alignment-baseline="central" class="ee-components-play-button-text">0</text></g><g class="ee-components-play-button-button"><circle class="ee-components-play-button-frame" cx="50" cy="50" r="40"></circle><path class="ee-components-play-button-icon" d="M 41 35 l 24 15 l -24 15 Z"></path></g></g></svg></div>

1 Ответ

0 голосов
/ 02 октября 2018

Коллега предложила добавить следующее к .ee-components-play-button:after, что является хакерским, но сработало: 

    top: calc(50% - 15%);
    left: calc(50% - 9%);

Так что, похоже, проблема заключалась в том, что IE11 использовал неверную исходную точку для выравнивания элемента.

...