在 Safari 上放大 SVG 中的低分辨率像素图像元素变得模糊，但在 Firefox 和 Chrome 中则不然

This is what it looks like in Chrome and Firefox:

This is what it looks like in Safari:

我已经尝试过通常建议的

image {
      image-rendering: optimizeSpeed;     
      image-rendering: -moz-crisp-edges;          
      image-rendering: -o-crisp-edges;       
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated; 
      image-rendering: optimize-contrast;      
      -ms-interpolation-mode: nearest-neighbor;  
}

这是我的 SVG 代码：

<svg viewBox="0 0 50 50" width="500" xmlns="http://www.w3.org/2000/svg" >
  <defs>
  <style>
    image, svg, use, #character { 
      image-rendering: optimizeSpeed;     
      image-rendering: -moz-crisp-edges;          
      image-rendering: -o-crisp-edges;       
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated; 
      image-rendering: optimize-contrast;      
      -ms-interpolation-mode: nearest-neighbor;  
    } 
    svg { background : #1A1A1A; 
    -webkit-transform: translate3d(0,0,0)}
  </style>
    <svg width="50" height="50" viewBox="100 0 50 50">
      <image id="skeleton" preserveAspectRatio="xMinYMin slice" href="data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC"></image>
    </svg>
  </defs>

  <svg id="character">
    <svg width="50" height="50" viewBox="0 0 50 50">
      <use href="#skeleton"></use>
    </svg>
  </svg>
</svg>

显然，safari 无法应用image-renderingsvg 上的属性<image>元素（适用于<img>元素）。

作为解决方法，您可以使用背景图像代替：

.svgBGforeign{
  width:500px; 
  height:500px;
  background-color : #1A1A1A; 
}
.svgBG{
  width:500px; 
  height:500px;
  background-color : #1A1A1A; 
  background-image: url(data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC);
  background-repeat:no-repeat;
  background-size:100%
}

.pixelated  { 
    image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    } 

<p>Foreign Object</p>
   <svg class="svgBGforeign pixelated" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg" >
  <svg class="pixelated" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg" >
     <foreignObject x="0" y="0" width="100%" height="100%">
       <img src="data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC">
     </foreignObject>
    <circle cx="75%" cy="75%" r="5%" fill="#fff"></circle>
     </svg>
  </svg>

<p>Background image for parent svg</p>
<svg class="svgBG pixelated" viewBox="0 0 50 50"  xmlns="http://www.w3.org/2000/svg" >
    <circle cx="75%" cy="75%" r="5%" fill="#fff"></circle>
  </svg>