Sự kiện con trỏ SVG: Khớp vùng nhấp với hình của bạn

pointer-events SVG điều khiển phần nào của hình có thể thành đích của sự kiện con trỏ. Hình có màu tô, đường viền mảnh và lỗ trống có thể phản hồi khác nhau dù thuộc cùng hình minh họa. Đặt vùng nhận trúng theo hành động người đọc mong đợi, rồi kiểm tra khoảng trống kỹ như vùng có màu.

Hướng dẫn này dành cho hình trong giao diện web: sơ đồ chọn được, biểu tượng nhấp được hoặc biểu tượng trong nút. Nếu SVG đã có đường dẫn dùng được, sửa trực tiếp mã tương tác. Vector hóa chỉ tham gia khi hình học chỉnh sửa được vẫn bị giữ trong PNG hoặc JPG.

Bắt đầu từ phần tử nhận cú nhấp

Với SVG, giá trị auto mặc định hoạt động như visiblePainted. Hình nhìn thấy có thể được nhắm vào trên màu tô khi fill không phải none, hoặc trên viền khi stroke không phải none. Đặc tả tương tác SVG định nghĩa những quy tắc kiểm tra nhận trúng này.

Điều đó giải thích biểu tượng có vẻ hỏng: trình lắng nghe có thể hoạt động trên đường bao nhưng bỏ qua tâm trống. Trình duyệt đang kiểm tra hình, không mặc định mọi điểm trong hình chữ nhật bao quanh đều có cùng ý nghĩa.

Đây là những lựa chọn hữu ích cho quy trình này:

all không có nghĩa là “mọi điểm trong khung nhìn SVG”. Nó vẫn chỉ hình học của phần tử. Nếu muốn một hình chữ nhật cụ thể quanh bản vẽ mảnh phản hồi, hãy chủ động tạo hình chữ nhật đó.

Cũng phân biệt màu trong suốt với không có màu. fill="transparent" vẫn là giá trị màu tô; fill="none" bỏ màu tô. Chỉ thay đổi độ đục (opacity) không phải cách đáng tin cậy để lớp phủ bỏ qua cú nhấp.

Thử màu tô, lỗ và viền hở

Chúng tôi dựng phòng thử SVG nội tuyến nhỏ với hình gốc viết thủ công. Nó có đường dẫn phức hợp xanh lam với lỗ chữ nhật, viền hở cam và bản sao viền đó trên vùng nhận trong suốt riêng. Đây là ví dụ giảng giải, không phải kết quả chuyển đổi PerfectVector.

Trong phép thử trình duyệt, nhấp dải xanh lam ghi ring. Nhấp tâm trống ghi ring-stage, SVG chứa nó. Đường cam ghi trail, còn khoảng dưới đỉnh ghi stroke-stage. Trong khung thứ ba, cả hai vị trí ghi hit.

Đường dẫn xanh lam dùng hai đường dẫn con chữ nhật và fill-rule="evenodd":

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

Hình chữ nhật trong nằm ngoài vùng được tô theo quy tắc tô chẵn-lẻ. Nó là lỗ thật. Hình chữ nhật trắng xếp trên sẽ là hình được tô khác với hành vi nhận trúng riêng. Nếu chính hình học sai, dùng hướng dẫn sửa lỗ SVG trước khi đổi quy tắc sự kiện.

Đây là viền hở từ khung thứ hai:

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

Để thử nhanh, đặt một trong hai đoạn vào tệp HTML với đoạn ghi nhận này phía sau. Cho SVG kích thước nhìn thấy, như width="360" height="270".

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

Nhấp vùng được tô, phần trong trống và góc ngoài hình vẽ. Ghi event.target phân biệt trúng đường dẫn với cú nhấp chỉ đến phần tử chứa SVG. Những ví dụ này thử chọn đích; chúng chưa phải điều khiển tương tác hoàn chỉnh.

Thêm vùng nhận mà không làm hình dày hơn

Giả sử toàn vùng quanh đường cam cần chọn đường đó. Tăng viền nhìn thấy sẽ đổi hình minh họa. Vùng nhận riêng cho phép vùng tương tác có hình học riêng:

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

Hình chữ nhật nằm sau hình. Đường cam bỏ qua việc nhắm con trỏ, nên hình chữ nhật nhận cú nhấp xuyên qua nó. Tọa độ của nó xác định rõ vùng nhận dự định; dữ liệu đường dẫn nhìn thấy vẫn giống khung thứ hai.

Cách này hữu ích cho vùng sơ đồ hoặc đường mảnh khó trỏ vào. Tránh để vùng nhận chồng lên điều khiển không liên quan và quyết định điều gì xảy ra tại nơi hai vùng gặp nhau. Hình vô hình lớn hơn có thể chặn cú nhấp của phần tử lân cận dễ như hình nhìn thấy.

Với biểu tượng đơn giản thực hiện một hành động, nút HTML chuẩn thường cung cấp vùng nhận cần thiết mà không phải thêm hình chữ nhật SVG.

Giữ kích hoạt bàn phím trên điều khiển

Nhắm con trỏ không cung cấp nhãn, kích hoạt bàn phím hay ngữ nghĩa nút. Đặt biểu tượng một hành động trong nút HTML có tên và giữ hình mang tính trang trí:

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

Phần tử button chuẩn cung cấp hành vi điều khiển; văn bản nhìn thấy cung cấp tên. Giữ chỉ báo tiêu điểm nhìn thấy. Dùng liên kết thật khi hành động dẫn sang trang khác.

Trong phòng thử của chúng tôi, Tab đưa tiêu điểm đến nút, rồi Enter và Space đều kích hoạt nó. Cũng thử các phím đó trong giao diện thực tế. Sơ đồ có nhiều hành động độc lập cần thiết kế tương tác bàn phím phù hợp cho chúng; một nút bao quanh không thể đại diện mọi hành động.

Đặt pointer-events: none cũng không phải trạng thái vô hiệu hóa. Nó không loại điều khiển vốn có thể nhận tiêu điểm khỏi điều hướng bàn phím. MDN mô tả cả tiêu điểm bàn phím và lan truyền sự kiện: phần tử hậu duệ có thể bật lại nhận trúng, và sự kiện của chúng vẫn có thể đi qua trình lắng nghe ở cha. Dùng thuộc tính disabled chuẩn khi cần vô hiệu hóa nút.

Khi hình ban đầu là PNG

Nếu nguồn duy nhất là PNG hoặc JPG phẳng và giao diện cần hình chỉnh sửa độc lập, quy trình ảnh sang vector của PerfectVector có thể chuẩn bị bản SVG để đánh giá. So sánh với bản gốc, kiểm tra lỗ và vùng quan trọng rồi quyết định phần nào cần vùng tương tác riêng.

Đồ lại cung cấp hình học. Ứng dụng của bạn vẫn cần ID có ý nghĩa, hàm xử lý hành động, tên, hành vi tiêu điểm và vùng nhận có chủ đích. Đường bao thị giác được đồ lại có thể chi tiết hơn nhiều vùng mà người dùng nên nhấp. Với biểu tượng giao diện nhỏ, vẽ lại thủ công hoặc bản vector gốc hiện có có thể dễ duy trì hơn. Hướng dẫn chuẩn bị biểu tượng PNG giải thích những gì cần kiểm tra trước khi đưa hình khôi phục vào bộ UI.

Nếu biểu tượng chỉ trang trí bên trong điều khiển, biểu tượng mặt nạ CSS có thể phù hợp hành vi màu của nó; điều khiển xung quanh vẫn chịu trách nhiệm hành động. Hướng dẫn vector hóa rộng hơn trình bày khi nào khôi phục đường dẫn hữu ích ngay từ đầu.

Xác minh vùng mong muốn trước phát hành

Thử kích thước hiển thị thực, không chỉ bản xem trước lớn trong trình chỉnh sửa:

1. Nhấp vùng tô, viền, từng lỗ và góc trống.
2. Kiểm tra đích sự kiện khi sai hành động được kích hoạt.
3. Kiểm tra hình chữ nhật trong suốt hoặc lớp phủ đang chặn con trỏ.
4. Xác nhận vùng nhận lân cận không chồng lấp bất ngờ.
5. Dùng Tab, Enter và Space khi phù hợp, với tiêu điểm nhìn thấy.
6. Thử tương tác cảm ứng trên thiết bị giao diện hỗ trợ.

Phòng thử xác minh những hình cụ thể này trong một trình duyệt. Nó không xác lập hành vi mọi trình duyệt với mặt nạ, cắt, bộ lọc hay hình nhập phức tạp. Thêm những trường hợp đó vào phép thử riêng nếu thiết kế dùng chúng.

Nếu thiếu hình học chỉnh sửa được, hãy thử ảnh nguồn trong PerfectVector, rồi kiểm tra đường bao và lỗ. Khi hình đã đúng, xác định và thử vùng tương tác riêng.

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

Vì sao SVG chỉ phản hồi khi tôi nhấp đường bao? Với hành vi con trỏ SVG mặc định, hình không có màu tô có thể chỉ được nhắm vào trên viền được vẽ. Kiểm tra giá trị màu tô và hành động dự định. Dùng vùng nhận có chủ đích hoặc điều khiển HTML chuẩn bao quanh khi khoảng trống cần kích hoạt cùng hành động.

pointer-events="all" có làm toàn SVG nhấp được không? Nó nhắm các vùng tô và viền của phần tử bất kể giá trị màu hay khả năng nhìn thấy. Nó không tự biến toàn khung nhìn SVG thành đích. Thêm hình rõ ràng hoặc dùng điều khiển bao quanh khi cần vùng đó.

Hình chữ nhật trong suốt có nhận cú nhấp không? Có. Trong suốt không có nghĩa là hình chữ nhật không có hình học hay màu tô. Hình chữ nhật trong suốt với giá trị pointer-events phù hợp có thể là vùng nhận chủ động, nhưng cũng có thể vô tình chặn cú nhấp.

Vector hóa ảnh có tạo nút hỗ trợ trợ năng không? Không. Vector hóa có thể tạo hình học chỉnh sửa được từ hình raster. Tên, hành vi bàn phím, hàm xử lý hành động, tiêu điểm và vùng tương tác phải được triển khai và thử trong giao diện.

Nguồn tham khảo

1. W3C — Mã kịch bản và tương tác SVG 2 — Định nghĩa nhắm con trỏ SVG và hình học dùng bởi các giá trị pointer-events.
2. W3C — Tô vẽ SVG 2 — Định nghĩa cách quy tắc tô xác định phần trong và lỗ của đường dẫn.
3. MDN — pointer-events — Giải thích nhắm đích, lan truyền, kế thừa và giới hạn tiêu điểm bàn phím.
4. MDN — Phần tử button — Mô tả hành vi nút chuẩn, đặt tên và trạng thái vô hiệu hóa.