<feMorphology>

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.

<feMorphology> primitive bộ lọc SVG được dùng để làm mòn hoặc giãn ảnh đầu vào. Công dụng của nó đặc biệt hữu ích trong các hiệu ứng làm dày hoặc làm mỏng.

Giống như các primitive bộ lọc khác, nó xử lý các thành phần màu trong color space linearRGB theo mặc định. Bạn có thể dùng color-interpolation-filters để dùng sRGB thay thế.

Ngữ cảnh sử dụng

Categories	Filter primitive element
Permitted content	Any number of the following elements, in any order: `<animate>`, `<set>`

Thuộc tính

in
operator
radius
Thuộc tính primitive bộ lọc: x, y, width, height, result

SVG

html

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
  <text y="1em">Văn bản bình thường</text>
  <text id="thin" y="2em">Văn bản bị làm mỏng</text>
  <text id="thick" y="3em">Văn bản bị làm dày</text>
</svg>

CSS

css

text {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 3em;
}

#thin {
  filter: url("#erode");
}

#thick {
  filter: url("#dilate");
}

Lọc nội dung HTML

SVG

html

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
</svg>

<p>Văn bản bình thường</p>
<p id="thin">Văn bản bị làm mỏng</p>
<p id="thick">Văn bản bị làm dày</p>

CSS

css

p {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 3em;
}

#thin {
  filter: url("#erode");
}

#thick {
  filter: url("#dilate");
}