希望有人能帮助我解决对齐问题 - 我无法弄清楚这是CSS还是SVG的问题。
我正在尝试使用提供的"自定义 CSS"字段替换(基于 HTML(Brightcove 视频播放器中的默认"播放"按钮。首先，我在ee-components-play-button-svg类上使用display:none禁用本机按钮，然后使用 CSS 使用:after元素附加所需的按钮。
问题是我不明白为什么在IE11中按钮出现在更下方和中心的右侧。我已经尝试了SO其他地方建议的修复程序，但无济于事：
- 为 SVG 添加宽度和高度
- 添加保留纵横比属性
我发现很难调试，因为IE的代码检查器不允许我专门选择和查看伪元素的属性。
您可以在下面看到实现。我只显示我添加的自定义 CSS，并且 SVG URL 经过解码以提高可读性，但以其他方式编码以绕过未编码 URL 的 IE 显示错误(实际代码在笔中(：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>一位同事建议在.ee-components-play-button:after中添加以下内容，这很笨拙，但有效：
top: calc(50% - 15%);
left: calc(50% - 9%);
因此，问题似乎是IE11使用不正确的原点来对齐元素。