Bóng SVG bị cắt? Kiểm tra bộ lọc và khung nhìn

Bóng SVG bị cắt có thể gặp hai giới hạn khác nhau. Vùng bộ lọc giới hạn nơi hiệu ứng được tính; sau đó khung nhìn SVG hoặc vùng chứa cha có thể cắt kết quả đã kết xuất. Mở rộng vùng bộ lọc trước. Nếu bóng vẫn kết thúc ở mép ảnh, kiểm tra khung nhìn và quy tắc cắt của nó.

Bạn không cần đồ lại SVG có đường dẫn còn nguyên. Hướng dẫn này thay đổi vùng làm việc của hiệu ứng và khung vẽ nhìn thấy trong khi giữ cùng dáng bao ngoài gốc.

Hai giới hạn, một đường dẫn không đổi

Chúng tôi tạo thủ công một hình bóng nhỏ và mở ba phiên bản trong trình duyệt. Mỗi phiên bản dùng cùng đường dẫn và cài đặt feDropShadow: dx="22", dy="18" và stdDeviation="12". Ảnh chụp bên dưới cho thấy bản hiển thị trình duyệt thực tế, không phải chuyển đổi PerfectVector.

Trong phiên bản đầu, vùng bộ lọc chạy từ (50, 50) tới (210, 180). Điều đó để lại mép cắt cứng dọc bên phải và dưới bóng. Ở phiên bản thứ hai, vùng mở rộng để phủ từ (-20, -20) tới (300, 280), nhưng SVG vẫn chỉ hiển thị 0 0 240 220. Mép phải bóng giờ chạm khung nhìn và bị cắt ở đó.

Phiên bản thứ ba giữ vùng lọc lớn hơn và đổi viewBox thành -20 -20 320 300. width và height cũng thành 320 và 300, nên cả ba minh họa giữ một đơn vị SVG trên mỗi pixel CSS. Khoảng trống bổ sung chứa bóng nhìn thấy mà không đổi kích thước đường dẫn.

Mở rộng vùng bộ lọc trong đúng hệ tọa độ

Các thuộc tính x, y, width và height của <filter> xác định vùng của nó. Mặc định lần lượt là -10%, -10%, 120% và 120%: đã có khoảng đệm, nhưng có thể chưa đủ cho một độ lệch và mức làm mờ cụ thể. MDN mô tả các mặc định này.

Kiểm tra filterUnits trước khi đổi số:

• objectBoundingBox, mặc định, diễn giải vùng theo hộp giới hạn phần tử được lọc. Lề phần trăm phụ thuộc kích thước hình.
• userSpaceOnUse cho phép xác định vùng trong hệ tọa độ người dùng hiện tại của phần tử tham chiếu bộ lọc. Nó hữu ích khi bạn biết tọa độ hình.

Những quy tắc đó áp dụng cho vùng, như tài liệu filterUnits mô tả. Chúng không tự đổi đơn vị độ lệch hoặc làm mờ bóng.

primitiveUnits điều khiển giá trị độ dài bên trong các thành phần bộ lọc. Mặc định là userSpaceOnUse; chúng tôi đặt rõ trong ví dụ để 22, 18 và 12 giữ nghĩa đó. Đổi sang objectBoundingBox sẽ đổi cách diễn giải những giá trị này. MDN tách đơn vị thành phần khỏi đơn vị vùng bộ lọc.

Với tệp của bạn, kiểm tra giới hạn đối tượng hoặc nhóm được lọc, rồi thêm đủ chỗ theo các hướng bóng mở rộng. Các số bên dưới phù hợp minh họa này. Chúng không phải lề bóng phổ quát. Nếu tăng mức làm mờ, di chuyển bóng hoặc biến đổi nhóm được lọc, kiểm tra kết quả lại.

Cho khung nhìn SVG đủ chỗ nữa

Lưu ví dụ đầy đủ này thành shadow.svg và mở trong trình duyệt. Đây là đúng SVG dùng cho trạng thái thứ ba, cũng đã kiểm tra dưới dạng tệp độc lập:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox có bốn giá trị: x nhỏ nhất, y nhỏ nhất, chiều rộng và chiều cao. Nó ánh xạ hình chữ nhật tọa độ người dùng đó vào khung nhìn SVG. Tăng kích thước của nó trong khi giữ cùng chiều rộng và chiều cao hiển thị khiến hình trông nhỏ hơn; không thêm chỗ bố cục ngoài phần tử. MDN giải thích ánh xạ viewBox.

Để tái hiện hai lỗi, chỉ đổi những giá trị này trên bản sao ví dụ:

1. Với trạng thái giữa, giữ bộ lọc nguyên nhưng đặt width="240", height="220" và viewBox="0 0 240 220" ở phần tử gốc.
2. Với trạng thái đầu, giữ khung nhìn nhỏ đó và cũng đặt bộ lọc thành x="50", y="50", width="160" và height="130".
3. Khôi phục ví dụ đầy đủ và so sánh mép phải cùng mép dưới. Dữ liệu đường dẫn không bao giờ thay đổi.

Nếu toàn bộ hình nằm ngoài khung vẽ, làm theo các bước kiểm tra SVG trống rộng hơn. Nếu hình nhìn thấy nhưng kích thước đổi khi nhập, kiểm tra quan hệ giữa đơn vị SVG và kích thước trước khi điều chỉnh hình học.

Vì sao overflow có thể giúp SVG nội tuyến nhưng bỏ sót vấn đề tệp

Ví dụ đặt rõ overflow="hidden" để giới hạn khung nhìn có thể tái hiện. Với SVG nội tuyến, overflow="visible" có thể bỏ việc cắt theo khung nhìn đó. Nó không thể khôi phục pixel đã bị vùng bộ lọc loại bỏ, và phần tử tổ tiên có cách cắt riêng vẫn có thể giấu kết quả. CSS cũng có thể ghi đè thuộc tính trình bày SVG. Tài liệu overflow SVG mô tả các quy tắc cắt này.

Kiểm tra cách nhúng thực tế. SVG nội tuyến trên trang rộng rãi, SVG độc lập và SVG tải qua phần tử ảnh HTML không cung cấp cùng bố cục bao quanh. Ảnh chụp ba trạng thái của chúng tôi dùng phần tử ảnh và cho tệp cố định đủ chỗ trong khung vẽ nội bộ. Dùng cách đó khi SVG cần được chuyển đi dưới dạng ảnh độc lập: đặt hiệu ứng trong giới hạn dự định, rồi mở lại đúng tệp đó ở nơi sử dụng.

Nếu nó đúng khi đứng riêng nhưng bị cắt trong thẻ nội dung, kiểm tra overflow, cắt vùng và mặt nạ của thẻ. Nếu chỉ lỗi trong một trình chỉnh sửa hoặc công cụ xuất cụ thể, so sánh bản sao đơn giản hóa và xem hỗ trợ bộ lọc của ứng dụng đó. Hướng dẫn thay đổi diện mạo SVG trình bày vấn đề nhập riêng đó.

Giữ hình học và dựng lại hiệu ứng riêng

Bóng đổ được kết xuất bổ sung diện mạo cho đường dẫn; nó không biến vùng mờ thành đường bao chỉnh sửa được khác. Giữ bản SVG chính có hình học gốc. Với quy trình cắt, kiểm tra đường bao riêng: bóng nhìn thấy không phải đường cắt bổ sung.

Nếu nguồn chỉ có PNG hoặc JPG, PerfectVector có thể giúp khôi phục hình học SVG trước khi thêm hiệu ứng. Chuyển hình chưa có bóng sang vector, rồi kiểm tra đường bao, khe hở và hình nền không mong muốn trong trình chỉnh sửa. Thêm bóng ở đó và thử giới hạn bằng các bước trên.

Dùng nguồn chưa có phần mờ gắn sẵn nếu có. Đồ lại ảnh đã làm phẳng không thể khôi phục cài đặt bộ lọc gốc hoặc chứng minh nơi nhà thiết kế muốn dáng bao ngoài sạch kết thúc. Với biểu trưng đơn giản không có nguồn sạch, vẽ lại thủ công có thể dễ kiểm soát hơn. Tổng quan vector hóa ảnh giải thích việc đồ lại tái dựng gì.

Kiểm tra tệp bàn giao

Mở chính SVG xuất ra, không chỉ khung vẽ trình chỉnh sửa. Xác nhận bóng dự định nằm vừa ở kích thước hiển thị cuối và đầu ra vẫn chứa đường dẫn bạn cần. Cũng kiểm tra trang web thực tế hoặc ứng dụng đích, vì vùng cắt bao quanh hoặc bộ lọc không được hỗ trợ có thể làm lỗi xuất hiện lại.

Tránh để vùng bộ lọc khổng lồ làm cách sửa mặc định. Vùng vượt xa nhu cầu hiệu ứng khiến tệp khó hiểu hơn; nó cũng không sửa được giới hạn cắt bên ngoài. Dùng lề có chủ ý, giữ nguồn chưa lọc và kiểm tra lại sau khi đổi mức làm mờ hoặc độ lệch.

Câu hỏi thường gặp

Vì sao bóng vẫn bị cắt sau khi tôi tăng chiều rộng bộ lọc? Khung nhìn SVG, vùng chứa cha, đường dẫn cắt hoặc mặt nạ có thể áp đặt giới hạn khác. Kiểm tra x và y của bộ lọc cùng chiều rộng và chiều cao, rồi kiểm tra mép cắt còn lại thẳng hàng ở đâu.

filterUnits có đổi bán kính làm mờ không? filterUnits điều khiển hệ tọa độ vùng bộ lọc. primitiveUnits điều khiển giá trị độ dài trong các thành phần bộ lọc, bao gồm độ lệch và cài đặt làm mờ bóng. Giữ chúng riêng khi chẩn đoán tệp.

Tôi có thể sửa việc cắt bằng cách vector hóa SVG lại không? Nếu SVG đã có đường dẫn sử dụng được, sửa vùng bộ lọc hoặc khung nhìn thay vào đó. Vector hóa nằm ở bước trước khi nguồn là hình raster; nó không khôi phục tham số bóng gốc.

Nguồn tham khảo

1. MDN: phần tử filter — Xác định phần tử bộ lọc và khoảng đệm vùng mặc định.
2. MDN: filterUnits — Giải thích tọa độ hộp giới hạn và không gian người dùng cho vùng bộ lọc.
3. MDN: primitiveUnits — Phân biệt độ dài thành phần với vùng bộ lọc ngoài.
4. MDN: viewBox — Mô tả tọa độ người dùng ánh xạ vào khung nhìn SVG thấy được như thế nào.
5. MDN: overflow — Mô tả cắt theo khung nhìn, mặc định SVG nội tuyến và ưu tiên CSS.

Bạn bắt đầu từ hình bóng chỉ có raster? Chuẩn bị đường dẫn SVG bằng PerfectVector, kiểm tra đường bao khôi phục trước, rồi thêm bóng và mở lại SVG cuối để kiểm tra cả hai giới hạn.