带有css单位em的SVG图标缩放的不同行为

Question

我正在页面上使用带有符号定义和使用标记的svg图标，如代码段所示。

[这在Chrome浏览器中很好用，但我发现Edge和Safari有一些问题。

svg:not(:root) {
    overflow: hidden;
}
.icon-search {
    width: .9287109375em;
    font-size: 14px;
}
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    font-size: 14px;
}

<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="icon-search" viewBox="0 0 60 60" width="30px" height="30px"><path id="font-awesome-svg-search" d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path></symbol>
</defs></svg>

<svg class="icon icon-search">
<use xlink:href="#icon-search">
</use>
</svg>

我意识到，我可以将大小值从1em更改为2em，以便在边缘浏览器中获得类似的渲染效果，如jfiddle的屏幕截图所示：

为什么看起来不同？如何更改基于浏览器的行为（js或css函数）？

Answer 1

因此，我尝试了许多不同的解决方案并提出了解决方案，这些解决方案适用于我的Opera，Safari（移动版），Firefox，Chrome和Edge。

---

我的解决方案

为了获得相似的外观，将根据used browser更改视图框。因此，对于野生动物园和边缘，视图框值将除以“ 2”（经验法则）。

我不确定，这是否是一个好的解决方案，但我希望有人可以使用它或对其进行改进。

我用矩形和多边形星形扩展了示例。此外，我添加了边框以查看渲染的框。

var browser = (function (agent) {
    switch (true) {
        case agent.indexOf("edge") > -1: return "edge";
        case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
        case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
        case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
        case agent.indexOf("trident") > -1: return "ie";
        case agent.indexOf("firefox") > -1: return "firefox";
        case agent.indexOf("safari") > -1: return "safari";
        default: return "other";
    }
})(window.navigator.userAgent.toLowerCase());

console.log(browser);

function resetSVGIconViewBox(elemId){

	console.log(elemId);
  
	if(jQuery("#" + elemId).length == 0 || !jQuery("#" + elemId).attr('viewBox'))
  {
  	return;
  }
	console.log(jQuery("#" + elemId)[0].getAttribute('viewBox'));  
  
  let newViewBoxValues = jQuery("#" + elemId)[0].getAttribute('viewBox').split(" ").map(x => x / 2);
	jQuery("#" + elemId)[0].setAttribute('viewBox', newViewBoxValues.join(' '));  
	
  console.log(newViewBoxValues.join(' '));
}

if(browser == "edge" || browser == "safari")
{
	resetSVGIconViewBox("icon-search");
    resetSVGIconViewBox("test-bug");
    resetSVGIconViewBox("poly-id");
    resetSVGIconViewBox("rect-id");
}
else
{
  console.log("no viewbox changes")
}

/* given classes of third party libs */
svg:not(:root) {
    overflow: hidden;
}
.icon-search {
    width: 1em;
    font-size: 14px;
}
.icon {
    display: inline-block;
    height: 1em;
    stroke-width: 0;
      border: 1px red solid;
}

/* given classes of third party libs */

/* only for testing*/
p{
  border: 1px red solid;
}
i{
    font-style: normal;
}
/* only for testing*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="rect-id" viewBox="0 0 100 100" width="30px" height="30px">
            <rect width="100%" height="100%"/>
        </symbol>
        <symbol id="poly-id" viewBox="20 35 320 320" width="30px" height="30px">
            <polygon points="100,10 40,198 190,78 10,78 160,198"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 56 60" width="30px" height="30px"><path id="font-awesome-svg-search" d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path></symbol>
    </defs>
</svg>

<p>
<i>
Test
</i>

<svg class="icon icon-search">
    <use xlink:href="#rect-id">
    </use>
</svg>
<svg class="icon icon-search">
<use xlink:href="#poly-id">
</use>
</svg>
<svg class="icon icon-search">
<use xlink:href="#icon-search">
</use>
</svg>
</p>

---

测试

我已经在iPhone 7上使用jsfiddle测试了Safari手机。通过在iPhone的chrome开发人员模式下启用移动工具栏，代码将返回“ safari”，但chrome浏览器仍在使用内部chrome引擎。

对我来说，无法在移动stackoverflow页面上运行该代码段。如果更改为“完整站点”，结果将如jfiddle所示。

---

该解决方案可能是一团糟，但它对我来说是一种解决方法。