SVG - 缩放图像问题

时间:2017-07-21 20:28:19

标签: image google-chrome svg

缩放包含SVG的父DIV,该SVG在彩色矩形上有图像,显示来自底层矩形的细线边缘。

<div style='transform: scale(0.79454)'>
    <svg width="1280" height="720">
      <rect fill="yellow" width="1280" height="720"/>
      <image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/>
    </svg>
</div>

在下面的屏幕截图中,图片下方有一个黄色框。两者都是相同的大小,但你可以看到黄色框&#34;出血&#34;从边缘出来一点(您可以查看下面的完整图像或小提琴,以清楚地看到它)。

enter image description here 无论我是否转换图像节点,这种工件都会发生,当我尝试使用viewBox而不是父div来扩展SVG时也会出现这种情况。它在Safari中比在Chrome中好一些,但在某些情况下仍然会发生。

这是一个小提琴https://jsfiddle.net/e17ea4j5/

有没有解决这个问题?

1 个答案:

答案 0 :(得分:2)

您看到的是抗锯齿的结果。通过图像边缘的半透明像素可以看到黄色矩形边缘的半透明像素。

没有任何优雅的解决方案可以消除这些问题。特别是当您按分数缩放时(例如1.4和0.79454)。

你留下了一些有些愚蠢的解决方案,比如在你的矩形周围放一个黑色笔触。

<rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>

body{
      background: black;
      margin: 0;
    }
<body>
  <div style='transform: scale(0.79454)'>
    <svg width="1280" height="720">
      <rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>
      <image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/>
    </svg>
  </div>
</body>