Onze vrijwilligers hebben dit artikel nog niet naar het Nederlands vertaald. Doe mee en help de klus te klaren!
U kunt het artikel ook in het English (US) lezen.

The stitchTiles attribute defines how the Perlin Noise tiles behave at the border.

Only one element is using this attribute: <feTurbulence>

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="noStitch" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="stitch" />
  </filter>

  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" />
  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" />
  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" />
  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" />

  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" />
  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 0);" />
  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" />
  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" />
</svg>

Usage notes

Value noStitch | stitch
Default value noStitch
Animatable Yes
noStitch
This value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function. Sometimes the result will show clear discontinuities at the tile borders.
stitch
This value indicates that the user agent will automatically adjust the x and y values of the base frequency such that the <feTurbulence> node’s width and height (i.e., the width and height of the current subregion) contain an integral number of the tile width and height for the first octave.

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of 'stitchTiles' in that specification.
Working Draft No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'stitchTiles' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
stitchTilesChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: Sebastianz, mdnwebdocs-bot, kscarfone, Jeremie
Laatst bijgewerkt door: Sebastianz,