通过Chrome

Question

我有一个带有.png图像的SVG，它通过变换矩阵（）在SVG中转换。我在IE（9-11）中对此进行了测试; Firefox＆amp;适用于Win / Mac / iOS和Safari / Mac的Chrome。在Windows和iOS iPad上Chrome浏览器中的.png图像显得模糊，但据我所知，在其他任何地方它都很好。哦，它只有100％模糊 - 在Chrome中放大或缩小它并且它会变得更加锐利。

我在.svg image blurry at specific zoom levels in Chrome找到了这个，并将固定尺寸应用于所有DIV，但是父母却没有帮助。

还尝试了这些解决方案的变体，但无法使用，或与现有代码冲突：

• CSS performance relative to translateZ(0)
• https://github.com/shower/shower/issues/120
• https://stackoverflow.com/a/10814821
• Why does SVG get blurred when scaled under webkit browsers?＆amp; https://stackoverflow.com/a/10402470

以下是示例代码http://codepen.io/miloz/pen/RWqOrd

的Codepen

          <svg x="0" y="0" width="850" height="400" viewBox="0 0 850 400" class="hotspot-position-svg">
        <g class="part-g" transform="matrix(0.864,0,0,0.864,356.5,242.5)">
          <!-- matrix(1,0,0,1,356.5,242.5) -->
          <!-- swap with matrix with scale of x/y = 1 and wheel isn't blurry at 100%. Although it doesn't fit the vehicle correctly of course. -->
          <image class="svg-part-image" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49556/FR3Z1K007A-WK_315_rear.png" viewBox="0 0 850 400" partid="19803193" width="81" height="125"></image>
          <image class="svg-part-image-mask" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/49556/empty.gif" viewBox="0 0 850 400"></image>
        </g>
      </svg>

车上的车轮是svg标签中的png。将刻度x / y的变换矩阵值更改为1，图像再次变为锐利。在浏览器中放大/缩小，它再次变得清晰。

非常感谢任何帮助