CSS/SVG背景图片IE11对齐问题答案

【问题标题】：CSS/SVG background image IE11 alignment problemCSS/SVG背景图片IE11对齐问题
【发布时间】：2019-03-03 23:16:25
【问题描述】：

希望有人可以帮助我解决对齐问题 - 我不知道这是 CSS 还是 SVG 的问题。

我正在尝试使用提供的“自定义 CSS”字段替换（基于 HTML）Brightcove video 播放器中的默认“播放”按钮。首先，我在 ee-components-play-button-svg 类上使用 display:none 禁用本机按钮，然后使用 CSS 使用 :after 元素附加所需的按钮。

问题是我无法弄清楚为什么在 IE11 中该按钮出现在更下方和中心右侧。我已经尝试过其他地方建议的修复，但无济于事：

为 SVG 添加宽度和高度
添加 preserveAspectRatio 属性

我发现很难调试，因为 IE 的代码检查器不允许我专门选择和查看伪元素的属性。

您可以在下面看到实现。我只显示了我添加的自定义 CSS，并且 SVG URL 被解码以提高可读性，但也被编码以绕过未编码 URL 的 IE 显示错误（实际代码在 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>

【问题讨论】：

您的 codepen 链接在 IE11 中无效。
使用IE11可以使用debug模式查看：s.codepen.io/cyberseraphic/debug/XxWKgM/PNkvYGgXXYNA

标签： css svg alignment background-image internet-explorer-11

【解决方案1】：

一位同事建议在.ee-components-play-button:after 中添加以下内容，这很老套，但很有效：

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

所以看来问题是 IE11 使用了不正确的原点来对齐元素。

【讨论】：