in

Ghi chú sử dụng

SourceGraphic

Keyword này đại diện cho các phần tử đồ họa là đầu vào gốc vào phần tử <filter>.

SourceAlpha

Keyword này đại diện cho các phần tử đồ họa là đầu vào gốc vào phần tử <filter>. SourceAlpha có tất cả các quy tắc giống SourceGraphic ngoại trừ việc chỉ kênh alpha được dùng.

BackgroundImage

Keyword này đại diện cho một ảnh chụp của tài liệu SVG bên dưới vùng filter tại thời điểm phần tử <filter> được gọi.

BackgroundAlpha

Giống BackgroundImage nhưng chỉ kênh alpha được dùng.

FillPaint

Keyword này đại diện cho giá trị của thuộc tính fill trên phần tử đích của hiệu ứng filter. Trong nhiều trường hợp, FillPaint là opaque ở mọi nơi, nhưng điều đó có thể không đúng nếu một hình dạng được tô bằng gradient hoặc pattern vốn chứa các phần trong suốt hoặc bán trong suốt.

StrokePaint

Keyword này đại diện cho giá trị của thuộc tính stroke trên phần tử đích của hiệu ứng filter. Trong nhiều trường hợp, StrokePaint là opaque ở mọi nơi, nhưng điều đó có thể không đúng nếu một hình dạng được tô bằng gradient hoặc pattern vốn chứa các phần trong suốt hoặc bán trong suốt.

<filter-primitive-reference>

Giá trị này là tên được gán cho filter primitive dưới dạng <custom-ident>. Nếu được cung cấp, đồ họa tạo ra từ việc xử lý filter primitive này có thể được tham chiếu bằng thuộc tính in trên một filter primitive tiếp theo trong cùng phần tử filter đó. Nếu không cung cấp giá trị, đầu ra sẽ chỉ có sẵn để tái sử dụng như đầu vào ngầm định cho filter primitive tiếp theo nếu filter primitive đó không cung cấp giá trị cho thuộc tính in của nó.

Phương án thay thế cho BackgroundImage

BackgroundImage không được hỗ trợ làm nguồn filter trong các trình duyệt hiện đại (xem bảng tương thích feComposite). Vì vậy, chúng ta cần nhập một trong các hình ảnh để hòa trộn ngay bên trong filter, bằng phần tử <feImage>.

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="backgroundMultiply">
      <!-- This will not work. -->
      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply" />
    </filter>
  </defs>
  <image
    href="mdn_logo_only_color.png"
    x="10%"
    y="10%"
    width="80%"
    height="80%" />
  <circle
    cx="50%"
    cy="40%"
    r="40%"
    fill="#cc0000"
    filter="url(#backgroundMultiply)" />
</svg>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageMultiply">
      <!-- This is a workaround. -->
      <feImage
        href="mdn_logo_only_color.png"
        x="10%"
        y="10%"
        width="80%"
        height="80%" />
      <feBlend in2="SourceGraphic" mode="multiply" />
    </filter>
  </defs>
  <circle
    cx="50%"
    cy="40%"
    r="40%"
    fill="#cc0000"
    filter="url(#imageMultiply)" />
</svg>

svg {
  width: 200px;
  height: 200px;
  display: inline;
}

Kết quả

Thông số kỹ thuật