css - 使用 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函数）？

标签： csssvgcross-browser

Answer 1

所以，我尝试了很多不同的解决方案并想出了这个，它适用于我在 Opera、Safari（移动）、firefox、chrome 和 edge 中的情况。

---

我的解决方案

为了获得类似的外观，视图框将根据使用的浏览器进行更改。因此，对于 safari 和边缘，viewbox 值将除以“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>

---

测试

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

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

---

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