6

I'm using an SVG <pattern> to make an <image> a fill on another user supplied SVG but I really hate how it automatically repeats (I get it) I need to know if there's a way or a hack to make it stop repeating the image as it's causing two issues.

  1. When the browser thinks it has to start painting multiple of the image (tiling) it visibly janks (I think this is also in part to the poor performance of Interact.js)

  2. Users don't want it to tile, just the empty space around it.

It's in an Electron app so browser support is minimal.

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

Here is the pattern as requested (with the transforms that are commonly applied), although but I'm not sure what use this is.

The <pattern>'s width and height are calculated by (target element's dimensions / image's size) + 1. data-x/y are used as part of a drag and drop interface, data-scale-x/y are used to scale the image without translating it.

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

The pattern is used as a fill attribute on a path in another, separate SVG.

Here is a Codepen that shows the image tiling in the same way I'm using it (less transforms)

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

Dave Mackintosh
  • 2,738
  • 2
  • 31
  • 40

2 Answers2

7

There is no equivalent to CSS no-repeat for SVG patterns. The only way to prevent the image pattern from repeating is to make the pattern tile (defined by width, height, x and y on the <pattern> element) larger than the shape that it fills.

Since you're using fill (not stroke) and the default objectBoundingBox value for patternUnits, this would normally be assured with a width/height of 1 (must be set explicitly) and x/y of 0 (the default). However, the transformations you're using would throw that off.

Without knowing how or why you are calculating the transformations the way you are, I can't tell you the reverse calculations to use to create a large enough pattern tile.

Instead, I would suggest that you leave the pattern transformation alone, and transform the <image> instead. The pattern transform attribute is useful because it transforms the tiling pattern as well as the contents, but since you do not want any tiling to be visible it is an unnecessary complication in this case.

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119
  • P.S.: Figuring out the correct transform on the `` (assuming you're trying to center it in the pattern tile & keep it a fixed size) will probably be easier with `patternContentUnits="objectBoundingBox"`. Or if you're willing to sacrifice support for older Firefox, [use a `viewBox` instead](http://stackoverflow.com/a/22886596/3128209). – AmeliaBR Nov 02 '15 at 16:23
  • The funny thing is, I swear I tried this as it seems so obvious. *falls over* – Dave Mackintosh Nov 03 '15 at 12:52
7

I know it has been 2 years, but I was looking for the same solution. I tried this post, and it works - Fill SVG path element with a background image without tiling or scaling

Pluto
  • 313
  • 1
  • 8
  • 19