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

SVG Pattern, any way/hack to stop repeating image

本文关键字：图像 方法 黑客 模式 任何停 SVG      更新时间：2023-09-26

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

  1. 当浏览器认为它必须开始绘制多个图像(平铺(时，它会明显卡住(我认为这也部分是由于 Interact 的性能不佳.js(

  2. 用户不希望它平铺，只希望它周围的空白区域。

它位于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

SVG 模式没有等效的 CSS no-repeat。 防止图像图案重复的唯一方法是使图案拼贴(由<pattern>元素上的width、height、x和y定义(大于它填充的形状。

由于您使用的是fill(不是stroke(和patternUnits的默认objectBoundingBox值，因此通常可以确保宽度/高度为1(必须明确设置(和x/y为0(默认值(。 但是，您正在使用的转换会抛弃它。

在不知道您如何或为什么以这种方式计算转换的情况下，我无法告诉您用于创建足够大的图案图块的反向计算。

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

我知道

已经 2 年了，但我正在寻找相同的解决方案。我试过这篇文章，它有效 - 用背景图像填充 SVG 路径元素而不平铺或缩放

相关文章：