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.

Thuộc tính scale xác định hệ số tỷ lệ dịch chuyển được dùng cho một bộ lọc nguyên thủy <feDisplacementMap>. Mức độ này được biểu thị trong hệ tọa độ do thuộc tính primitiveUnits trên phần tử <filter> thiết lập.

Bạn có thể dùng thuộc tính này với phần tử SVG sau:

<feDisplacementMap>

Ví dụ

html,
body,
svg {
  height: 100%;
}

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" filter="url(#displacementFilter)" />
  <circle cx="340" cy="100" r="80" filter="url(#displacementFilter2)" />
</svg>