scale

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das scale Attribut definiert den Verschiebungsfaktor, der bei einer <feDisplacementMap> Filterprimitive verwendet wird. Der Wert wird im Koordinatensystem ausgedrückt, das durch das primitiveUnits Attribut auf dem <filter> Element festgelegt wird.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 480 220" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" />
  </filter>
  <filter id="displacementFilter2" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" />
  </filter>

  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter);" />
  <circle
    cx="100"
    cy="100"
    r="80"
    style="filter: url(#displacementFilter2);
  transform: translateX(240px);" />
</svg>

Anwendungshinweise

Wert <number>
Standardwert Keiner
Animierbar Ja
<number>

Dieser Wert definiert den Maßstabsfaktor für die Verschiebung.

Wenn der Wert dieses Attributs 0 ist, hat diese Operation keinen Effekt auf das Quellbild.

Spezifikationen

Specification
Filter Effects Module Level 1
# element-attrdef-fedisplacementmap-scale

Browser-Kompatibilität

BCD tables only load in the browser