Question

我正在使用SVG <pattern>对其他用户提供的SVG进行<image>填充，但我真的很讨厌它是如何自动重复的（我明白了）我需要知道是否有办法或者黑客让它停止重复图像，因为它导致了两个问题。

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

它位于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>的{{1}}和width由height计算。 (target element's dimensions / image's size) + 1用作拖放界面的一部分，data-x/y用于缩放图片而不进行翻译。

data-scale-x/y

该模式在另一个单独的SVG中用作路径上的<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>属性。

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

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

Answer 1

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

由于您使用fill（不是stroke）和objectBoundingBox的默认patternUnits值，因此通常会确保宽度/高度为<image> 1（必须明确设置）和x / y为0（默认值）。但是，您正在使用的转换会将其丢弃。

我不知道你是如何或为什么以你的方式计算变换，我不能告诉你用于创建足够大的图案拼贴的反向计算。

相反，我建议您单独保留模式转换，然后转换$scope.model.Email。模式转换属性很有用，因为它可以转换平铺模式以及内容，但由于您不希望任何平铺可见，因此在这种情况下这是不必要的复杂化。

Answer 2

我知道已经2年了，但我一直在寻找相同的解决方案。我试过这篇文章，它有效 - Fill SVG path element with a background image without tiling or scaling

SVG模式，任何方式/黑客停止重复图像

2 个答案: