XPath của SVG

SVG là thẻ gì?

SVG (Scalable Vector Graphics) là một định dạng hình ảnh vector dựa trên XML, được sử dụng để hiển thị đồ họa vector trên web. Thẻ <svg> là một phần tử HTML dùng để chứa các thành phần đồ họa như đường thẳng, hình tròn, hình chữ nhật, hoặc các hình dạng phức tạp khác. SVG được định nghĩa trong một XML (namespace) riêng, thường là http://www.w3.org/2000/svg. Điều này cho phép SVG hiển thị các hình ảnh có khả năng co giãn mà không mất chất lượng, phù hợp cho các ứng dụng web động và tương tác.

Ví dụ về thẻ SVG cơ bản:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Tại sao SVG không thể select như XPath thông thường?

Khi sử dụng XPath để truy vấn các phần tử trong tài liệu HTML hoặc XML, các thẻ SVG không thể được chọn trực tiếp bằng cú pháp thông thường (ví dụ: //svg) trong một số trường hợp. Lý do chính là vì thẻ <svg> thuộc về một namespace XML riêng thông qua thuộc tính xmlns (trong hình là http://www.w3.org/2000/svg).

Trong các trình phân tích cú pháp XML hoặc các công cụ như Playwright, Selenium, namespace này yêu cầu cách xử lý đặc biệt để truy vấn chính xác.

Cách select thẻ SVG: //*[local-name()=’svg’]

Để truy vấn thẻ SVG bằng XPath một cách chính xác, bạn cần sử dụng hàm local-name() để bỏ qua namespace và tập trung vào tên thẻ. Cú pháp như sau:

//*[local-name()='svg']

Giải thích:

• //*: Chọn tất cả các phần tử trong document.
• [local-name()='svg']: Lọc các phần tử có tên cục bộ (local name) là svg, bỏ qua namespace.

Ví dụ, để chọn một thẻ <circle> bên trong thẻ <svg>:

//*[local-name()='svg']//*[local-name()='circle']

Lợi ích của cách này:

• Tương thích: Hoạt động trên mọi công cụ hỗ trợ XPath, bao gồm Playwright, Selenium, lxml, hoặc các trình phân tích cú pháp XML khác.
• Bỏ qua namespace: Không cần khai báo hoặc xử lý namespace phức tạp.
• Linh hoạt: Có thể áp dụng cho bất kỳ thẻ nào trong SVG, như <path>, <rect>, <g>, v.v.

Lưu ý:

• Nếu bạn làm việc trong một môi trường cụ thể (như Playwright với TypeScript), hãy đảm bảo rằng trình duyệt hoặc công cụ được sử dụng hỗ trợ cú pháp XPath này.
• Trong một số trường hợp, nếu tài liệu XML có khai báo namespace rõ ràng, bạn có thể cần sử dụng namespace prefix thay vì local-name().

from lxml import etree
# Đăng ký namespace
nsmap = {'svg': 'http://www.w3.org/2000/svg'}
# Truy vấn XPath với tiền tố
result = tree.xpath('//svg:svg', namespaces=nsmap)