SVG - 图像的缩放问题答案

【问题标题】：SVG - scaling issues with imagesSVG - 图像的缩放问题
【发布时间】：2017-12-28 00:16:16
【问题描述】：

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

<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>

在下面的屏幕截图中，图像下方有一个黄色框。两者大小相同，但您可以看到黄色框从边缘“渗出”一点（您可以查看完整图像或下面的小提琴以清楚地看到它）。

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

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

有什么解决办法吗？

【问题讨论】：

当然有，去掉矩形。
谢谢。假设我不是白痴，这是一个简化的例子，只是为了说明问题。
除了保罗在他的回答中解释的有限方式之外，没有其他答案可以解决您的问题。

标签： image google-chrome svg

【解决方案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>

【讨论】：

谢谢，不幸的是，就我而言，这不是一个可行的解决方案。我正在尝试解决一个更通用的创作工具，其中图像可以任意定位在像矩形这样的形状之上。图像没有必要像我的示例中那样完全掩盖底层形状 - 它可能只位于一个边缘，我不想强制底层矩形有笔触，因为它的一部分可能是故意可见的。
另一个选项是确保矩形和图像与像素边界完全对齐。如果以 1:1（或其倍数）查看 SVG，这至少可以解决问题。
我想出的解决方案是稍微缩放矩形，使其不再渗出。 style='transform: scale(0.999); transform-origin: 50% 50%'
小心。 transform-origin: 50% 50% 在 SVG 中的工作方式与在 HTML 中不同。 50% 指的是 SVG 视口的中心，而不是对象的中心。 FF 中的百分比行为也是正确的，但在 Chrome 中被破坏了