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

Question

这就是它在Chrome和Firefox中的样子：

​

这就是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>

Answer 1

显然，safari不能将image-rendering属性应用于svg <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>

​