SVG 图案，任何 way/hack 停止重复图像

Question

我正在使用 SVG <pattern> 对另一个用户提供的 SVG 进行 <image> 填充，但我真的很讨厌它自动重复的方式（我明白了）我需要知道是否有一种使其停止重复图像的方法或技巧，因为它会导致两个问题。

当浏览器认为它必须开始绘制多个图像（平铺）时，它会明显卡顿（我认为这也是 Interact.js 性能不佳的部分原因）
用户不希望它平铺，只是它周围的空白space。

它在 Electron 应用程序中，因此浏览器支持最少。

process.versions = {
  ares: "1.10.1-DEV"
  atom-shell: "0.34.1"
  chrome: "45.0.2454.85"
  electron: "0.34.1"
  http_parser: "2.5.0"
  modules: "46"
  node: "4.1.1"
  openssl: "1.0.2d"
  uv: "1.7.4"
  v8: "4.5.103.29"
  zlib: "1.2.8"
}

这是请求的模式（带有常用的转换），虽然但我不确定这有什么用。

<pattern>的width和height由(target element's dimensions / image's size) + 1计算得出。 data-x/y 用作拖放界面的一部分，data-scale-x/y 用于缩放图像而不翻译它。

<pattern id="user_image_container" patternUnits="objectBoundingBox" x="0" y="0" width="16.125264252110085" height="11.416432536797034" data-x="-3008" data-y="-1525" patternTransform="rotate(0 -416 203) translate(170.510014198065 170.5174437535593) scale(0.070795135733522) translate(-3008 -1525)" data-scale-x="170.510014198065" data-scale-y="170.5174437535593">
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Users/username/Desktop/IMG_8829 2.JPG" id="user_image" width="5184" height="3456"></image>
</pattern>

该图案在另一个单独的 SVG 中用作路径上的 fill 属性。

这是一个 Codepen，它以与我使用它相同的方式显示图像平铺（较少变换）

http://codepen.io/davemackintosh/pen/zvLvey

Answer 1

SVG 模式没有 CSS no-repeat 的等价物。防止图像图案重复的唯一方法是在 <pattern> 元素上制作图案平铺（由 width、height、x 和 y 定义) 大于它填充的形状。

由于您使用的是 fill（而不是 stroke）和 patternUnits 的默认值 objectBoundingBox，因此通常可以使用 width/height 为 1（必须明确设置）和 x/y 为 0（默认值）。但是，您正在使用的转换会使它消失。

在不知道您如何或为什么按照您的方式计算变换的情况下，我无法告诉您用于创建足够大的图案拼贴的逆向计算。

相反，我建议您不要进行模式转换，而是转换 <image>。 pattern transform 属性很有用，因为它会转换平铺模式和内容，但由于您不希望任何平铺可见，因此在这种情况下这是不必要的复杂化。

Answer 2

我知道已经过去 2 年了，但我一直在寻找相同的解决方案。我尝试了这个 post，它有效 -

SVG 图案，任何 way/hack 停止重复图像

SVG Pattern, any way/hack to stop repeating image

javascript

svg

electron