IE 11 + Angular中的SVG没有内容类型

我正在构建一个Anguar 8应用程序,它使用一个库(由我公司内部的团队创建的库),该库包含用于背景图像样式的SVG。

出于开发目的,Chrome和IE 11(IE版本11.805.17763.0IS)可以很好地加载SVG。但是,该应用程序已部署到具有IE 11版本11.0.9600.19180CO的Citrix服务器。在本地计算机上,网络属性控制台选项卡中的文件内容类型正确显示为image / svg + xml。但是,在Citrix服务器的IE 11上,内容类型为空,最终结果是未显示SVG。

完整的CSS:

.date-facade > button {
  background: transparent url('../img/ico-calendar-blue.svg') no-repeat scroll 50% 50%;
  background-size: 1.2rem 1.2rem;
  border-color: #CED3D9;
  border-style: solid;
  border-bottom-right-radius: 0.29em;
  border-top-right-radius: 0.29em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0.2rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0.2rem;
  border-width: 0 0 0 .1em;
  border-width: 0 0 0 .08rem;
  cursor: pointer;
  height: 2.68em;
  height: 2.2rem;
  margin-left: 0.25em;
  margin-left: 0.15rem;
  padding: 0;
  width: 2.9em;
  width: 2.2rem;
}

(我不知道为什么该库在rem和em中都指定了其中某些属性,而这正是该库的方式。)

svg文件:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0,SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
<path fill="#1893D1" d="M17.7,2h-0.9V1.7C16.8,0.7,16,15.1,0h-0.9c-0.9,0-1.7,0.7-1.7,1.7V2h-0.8V1.7C11.7,10.9,10,0H9
    C8.1,7.3,1.7V2H6.6V1.7C6.6,5.8,4.9,0H3.9C3,2.2,1.7V2H1.3C0.6,2,2.5,3.2v14.5C0,18.4,0.6,19,1.3,19
    h16.4c0.7,1.3-0.6,1.3-1.2V3.2C19,17.7,2z M17,6v3h-3V6H17z M6,10h3v3H6V10z M5,13H2v-3h3V13z M9,14v3H6v-3H9z M10,14
    h3v3h-3V14z M10,10h3v3h-3V10z M14,10h3v3h-3V10z M13.4,1.7c0-0.4,0.4-0.8,0.8-0.8H15c0.4,0.8,0.4,0.8v2.5
    C15.9,4.6,15.5,5,15,5h-0.9c-0.4,0-0.8-0.4-0.8-0.8V1.7z M13,6v3h-3V6H13z M8.2,0.8-0.8h0.9
    c0.4,0.8v2.5c0,0.4-0.4,0.8-0.8,0.8H9.1C8.6,8.2,4.2V1.7z M9,6v3H6V6H9z M3.1,0.8-0.8
    h0.9c0.4,0.8v2.5C5.6,5.3,4.8,5H4C3.5,3.1,4.2V1.7z M5,6v3H2V6H5z M2,14h3v3H2V14z M14,17v-3h3v3H14z
    "/>
</svg>

库的SVG或Angular + SVG是否有问题?我一直在搜索google和堆栈溢出,以获取有关SVG没有内容类型的帖子,但还没有提出任何建议。我怀疑未显示SVG是因为未指定内容类型,但我不知道为什么未指定它或如何解决它。当我复制文件路径并在单独的选项卡中打开图像时,将显示XML而不是SVG图像。

值得注意的是该库有一个演示站点,当我在Citrix IE中加载该演示站点时,SVG可以很好地加载。

xue5227980 回答:IE 11 + Angular中的SVG没有内容类型

我不确定角度应用程序将部署到哪个Web服务器。

如果IE11在Citrix中显示SVG时出现问题,则chrome,firefox和其他浏览器也将无法呈现SVG。

如果您的Web服务器是IIS,则可以在IIS控制台中添加mimeType。

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>
本文链接:https://www.f2er.com/3114770.html

大家都在问