Question

缩放包含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;从边缘出来一点（您可以查看下面的完整图像或小提琴，以清楚地看到它）。

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

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

有没有解决这个问题？

Answer 1

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

没有任何优雅的解决方案可以消除这些问题。特别是当您按分数缩放时（例如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>

SVG - 缩放图像问题

1 个答案: