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 Verschiebungsmaßstab, der bei einer <feDisplacementMap> Filterprimitiv verwendet wird. Die Menge wird im Koordinatensystem ausgedrückt, das durch das primitiveUnits Attribut auf dem <filter> Element festgelegt wird.

Dieses Attribut kann mit folgenden SVG-Elementen verwendet werden:

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>

Verwendungsnotizen

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