SVG.js: nhập hình, sửa đường dẫn và xuất SVG

Để nhập hình vào SVG.js nhằm chỉnh sửa từng phần, truyền mã đánh dấu SVG đáng tin cho .svg(), tìm phần tử mong muốn bằng ID đã tạo và đổi màu tô của phần tử đó. Xuất toàn bộ gốc SVG của hình cho tệp độc lập. Bản xuất chỉ có phần tử con là một mảnh: nó cần gốc có kích thước và viewBox dự kiến trước khi bàn giao như tài liệu.

Hướng dẫn này dùng hình thoi rỗng gốc và một tam giác riêng. Tam giác đổi từ màu đất vàng sang san hô trong khi hình thoi giữ màu tô xanh mòng két và khoảng trống. Chúng tôi kiểm thử ví dụ hoàn chỉnh bên dưới bằng SVG.js 3.2.6, cố định theo bản phát hành 3.2.6 chính thức. Những quan sát này liên quan đến hai đường dẫn đơn giản tự tạo, không phải mọi tính năng SVG khác có thể chứa.

Quyết định cần hình trực tiếp hay ảnh

Câu lệnh import JavaScript tạo URL tài nguyên trả lời vấn đề tải. Bản thân nó không đưa đường dẫn của tệp vào cây SVG trực tiếp của trình chỉnh sửa. Tài liệu nhập/xuất hiện tại của SVG.js mô tả nhập mã đánh dấu và lấy phần tử SVG ngoài hoặc các phần tử con.

SVG bên trong ảnh vẫn là nội dung SVG. Tuy nhiên trong đối chứng lớp bao ảnh, cây SVG chứa nó có một phần tử image và không có đường dẫn trực tiếp; tìm accent trong cây đó không thấy gì. Nó không đi vào tài liệu của ảnh nhúng. MDN mô tả ngữ cảnh ảnh SVG riêng và các hạn chế. Đừng suy ra mô hình chỉnh sửa từ bản kết xuất trông sắc nét.

Với quyết định nhúng rộng hơn, đọc SVG nội tuyến so với ảnh. Nếu muốn mô hình đối tượng canvas của Fabric, hướng dẫn nhập Fabric.js trình bày bộ phân tích và API chỉnh sửa khác.

Chạy một chỉnh sửa đường dẫn có tên và lưu từng cách biểu diễn

Lưu mã hoàn chỉnh bên dưới thành starter.html trong thư mục trống. Phục vụ qua HTTP, chẳng hạn bằng python3 -m http.server 8000, rồi mở http://localhost:8000/starter.html. Tập lệnh tải gói cố định phiên bản từ CDN, nên mã khởi đầu cần kết nối mạng.

Trang hiển thị hình gốc, bản sao chỉnh sửa trực tiếp và đối chứng lớp bao ảnh. Các liên kết tải bản chính gốc, gốc đầy đủ trước/sau, mảnh văn bản chỉ phần tử con, bản sao bọc lại và lớp bao ảnh. Báo cáo đọc pixel từ ảnh SVG được vẽ lên canvas; nó không xuất PNG.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Original SVG.js artwork import and export</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  main { display: grid; grid-template-columns: repeat(3, 260px); gap: 20px; }
  figure { margin: 0; }
  svg, img { display: block; background: white; border: 1px solid #bbb; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Trusted artwork, one fill edit and two export forms</h1>
<main>
  <figure><img id="original" alt="Original artwork"><figcaption>Original SVG image</figcaption></figure>
  <figure><div id="live"></div><figcaption>Imported live SVG, accent edited</figcaption></figure>
  <figure><div id="wrapper"></div><figcaption>Image wrapper, original artwork</figcaption></figure>
</main>
<p id="downloads"></p>
<pre id="report"></pre>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.6/dist/svg.min.js"></script>
<script>
  const markup = '<svg xmlns="http://www.w3.org/2000/svg" id="original-artwork" width="240" height="160" viewBox="0 0 240 160">'
    + '<path id="body" d="M80 20 L140 80 L80 140 L20 80 Z M80 56 L104 80 L80 104 L56 80 Z" fill="#176b5b" fill-rule="evenodd"/>'
    + '<path id="accent" d="M172 48 L220 80 L172 112 Z" fill="#d4a53a"/></svg>';
  const url = text => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
  async function pixels(text) {
    const image = new Image();
    image.src = url(text);
    await image.decode();
    const canvas = document.createElement('canvas');
    canvas.width = 240;
    canvas.height = 160;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    const rgba = (x, y) => [...ctx.getImageData(x, y, 1, 1).data];
    return { naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight,
      opening: rgba(80, 80), body: rgba(80, 40), accent: rgba(188, 80), corner: rgba(0, 0) };
  }
  function inventory(text) {
    const node = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
    return { root: node.localName, viewBox: node.getAttribute('viewBox'),
      paths: [...node.querySelectorAll('path')].map(p => ({ id: p.id, d: p.getAttribute('d'), fill: p.getAttribute('fill') })),
      imageCount: node.querySelectorAll('image').length };
  }
  async function run() {
    document.getElementById('original').src = url(markup);
    const host = SVG().addTo('#live').size(240, 160).viewbox(0, 0, 240, 160);
    host.svg(markup);
    const artwork = host.findOne('#original-artwork');
    const before = artwork.svg();
    const accent = artwork.findOne('#accent');
    const beforeD = accent.attr('d');
    accent.fill('#b95434');
    const full = artwork.svg();
    const children = artwork.svg(false);
    const rewrapped = SVG().size(240, 160).viewbox(0, 0, 240, 160);
    rewrapped.svg(children);
    const wrappedFull = rewrapped.svg();
    const imageWrapper = SVG().addTo('#wrapper').size(240, 160).viewbox(0, 0, 240, 160);
    imageWrapper.image(url(markup)).size(240, 160);
    const wrapperFull = imageWrapper.svg();
    const files = { 'master.svg': markup, 'before.svg': before, 'edited.svg': full,
      'children-only.txt': children, 'rewrapped.svg': wrappedFull, 'image-wrapper.svg': wrapperFull };
    for (const [name, text] of Object.entries(files)) {
      const a = document.createElement('a');
      a.href = name.endsWith('.txt') ? 'data:text/plain;charset=utf-8,' + encodeURIComponent(text) : url(text);
      a.download = name;
      a.textContent = name;
      a.style.marginRight = '12px';
      document.getElementById('downloads').append(a);
    }
    const results = {};
    for (const [name, text] of Object.entries(files)) {
      if (name.endsWith('.svg')) results[name] = { inventory: inventory(text), pixels: await pixels(text) };
    }
    document.getElementById('report').textContent = JSON.stringify({
      requestedPackageVersion: '3.2.6',
      scriptURL: document.querySelector('script[src]').src,
      selectedAccentFound: Boolean(accent), selectedAccentDUnchanged: beforeD === accent.attr('d'),
      allPathDUnchanged: JSON.stringify(inventory(before).paths.map(p => p.d)) === JSON.stringify(inventory(full).paths.map(p => p.d)),
      childrenHasOuterSVG: /<svg[\s>]/i.test(children),
      wrapperDirectPathCount: imageWrapper.find('path').length,
      wrapperAccentFound: Boolean(imageWrapper.findOne('#accent')), results
    }, null, 2);
  }
  run();
</script>
</html>
 

Mã nhập chứa một gốc lồng tên original-artwork. Ví dụ chọn gốc đó trước khi xuất, để bản bàn giao có khung nhìn 240 × 160 đã tạo cho nó thay vì dựa vào vùng chứa cha không liên quan. Sau đó chọn accent bên trong gốc. SVG.js mô tả tham chiếu dựa trên bộ chọn và phương thức phần tử; đặt tên phần tường minh tránh phụ thuộc thứ tự đường dẫn.

Mã chủ đích chỉ giới hạn ở mã đánh dấu cố định của chính nó. Nó không phải bộ làm sạch SVG tải lên. Phân tích hay chèn chuỗi bất kỳ không xác lập tính an toàn; tài liệu tham khảo DOMParser của MDN phân biệt việc phân tích với rủi ro chèn nội dung không đáng tin. Thiết kế chính sách kiểm tra và tin cậy riêng trước khi điều chỉnh quy trình này cho tải lên.

Kiểm tra kết quả đã lưu, không chỉ bản xem trước trực tiếp

Lần chạy trình duyệt thực tế tạo ra các kết quả kiểm tra sau:

Cả hai chuỗi d đường dẫn gốc giữ giống hệt trong bản xuất trước/sau. Mẫu bên trong tam giác đổi từ RGBA (212, 165, 58, 255) thành (185, 84, 52, 255). Mẫu trong hình thoi giữ (23, 107, 91, 255); khoảng trống và góc ngoài giữ alpha 0. Cả năm tệp SVG độc lập mở lại dưới dạng ảnh với kích thước nội tại 240 × 160.

Đổi một phần có tên

Những kết quả này xác lập chỉnh sửa mong muốn cho mẫu. Chúng không xác lập bảo toàn XML giống hệt từng byte, hỗ trợ mọi bộ lọc hay CSS hoặc phù hợp quy trình sản xuất. Việc tuần tự hóa của thư viện có thể đổi mã tài liệu trong khi giữ các chuỗi đường dẫn cụ thể này nguyên vẹn. Giữ bản chính gốc cạnh bản bàn giao.

Với hình của bạn, kiểm tra các cấu trúc thực sự dùng: tên và nhóm, cắt xén, chuyển sắc, biến đổi, nét và văn bản. Mở lại tệp đã xuất trong ứng dụng nhận, rồi lặp lại chỉnh sửa mong muốn. Hướng dẫn chỉnh sửa SVG có thể giúp chẩn đoán cấu trúc nguồn trước khi đổi mã nhập.

Xem bản xuất chỉ phần tử con là mảnh có chủ đích

Trong lần chạy này, artwork.svg(false) trả về hai đường dẫn không có thẻ svg ngoài. Nó bỏ khung nhìn của gốc hình. Gốc SVG rewrapped riêng cung cấp kích thước 240 × 160 và cùng viewBox trước khi nhận các phần tử con đó; tệp xuất của nó sau đó kết xuất tam giác san hô đã kiểm tra.

Chọn tài liệu đầy đủ hay mảnh theo đích. Với tệp tải độc lập, giữ toàn bộ gốc dự kiến. Để chèn vào hình có sẵn, quyết định hệ tọa độ cha, kiểu kế thừa và định nghĩa mà các phần tử con sẽ dùng. Mẫu đơn giản này không có tài nguyên ngoài hay định nghĩa chung, nên không thử xem mảnh có tham chiếu mang đủ mọi phụ thuộc cần thiết hay không.

Bản xuất lớp bao ảnh giữ SVG mã hóa mà các byte giải mã khớp bản chính gốc. Đối chứng đó cho thấy khác biệt cách biểu diễn, không phải chuyển raster. Nếu nguồn đã là hình học vector dùng được, sửa cách chọn phần tử hoặc ranh giới xuất trước khi đồ lại.

Khi nguồn không có đường dẫn để sửa

Nếu hình minh họa PNG hoặc JPG phẳng của bạn cần các vùng đổi màu riêng, hãy chuẩn bị ứng viên SVG bằng PerfectVector. Kiểm tra đường bao và khoảng trống, rồi tạo tên phần ứng dụng cần. Vector hóa không biết một vùng nên tên accent hay bảo đảm tài liệu nhập phù hợp mô hình dữ liệu trình chỉnh sửa.

Giữ bản chính SVG phù hợp khi những hình đó đã tồn tại. Dùng tổng quan vector hóa để quyết định liệu chuẩn bị raster thành vector có cần nằm trước mã của bạn hay không.

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

SVG.js có thể nhập chuỗi SVG để chỉnh sửa không? Có. Mã khởi đầu này nhập mã đáng tin của chính nó vào vùng chứa SVG trực tiếp, chọn đường dẫn tự tạo và đổi màu tô. Tải lên bất kỳ cần chính sách tin cậy và kiểm tra riêng; API mã đánh dấu không phải bộ làm sạch.

Tại sao tôi thấy hình nhưng không tìm được đường dẫn điểm nhấn? Kiểm tra bạn đã nhập mã trực tiếp hay đặt ảnh. Đối chứng lớp bao ảnh hiển thị hình SVG nhưng không có đường dẫn accent trực tiếp trong cây lớp bao. Cũng kiểm tra phần tử cha được chọn và ID thực của nguồn.

Bản xuất chỉ phần tử con có phải tệp SVG hoàn chỉnh không? Không trong mẫu này. Nó chứa hai đường dẫn không có khung nhìn SVG ngoài. Dùng gốc đầy đủ dự kiến cho tệp độc lập, hoặc cung cấp gốc đích và hệ tọa độ tường minh khi chèn mảnh.

Chỉnh sửa thành công có chứng minh xuất giữ mọi tính năng SVG không? Không. Chúng tôi kiểm tra hai đường dẫn đơn giản, giá trị màu tô, dữ liệu đường dẫn chính xác và năm tệp mở lại. Kiểm thử tính năng cụ thể cùng ứng dụng nhận mà hình cần, và giữ bản chính gốc.

Nguồn tham khảo

1. SVG.js — Nhập / Xuất, phiên bản 3.2 — Nhập mã đánh dấu và tuần tự hóa gốc đầy đủ so với chỉ phần tử con.
2. SVG.js — Tham chiếu / Tạo phần tử, phiên bản 3.2 — Tìm phần tử có tên và đổi thuộc tính.
3. SVG.js — Bản phát hành 3.2.6 — Bản chính thức được cố định trong mã khởi đầu đã chạy.
4. MDN — SVG làm ảnh — Ngữ cảnh nhúng ảnh và các hạn chế.
5. MDN — DOMParser.parseFromString — Phân tích mã và xử lý riêng đầu vào không đáng tin.

Nếu hình minh họa chỉ có dưới dạng pixel raster và cần chỉnh sửa từng phần, hãy chuẩn bị ứng viên vector từ hình của bạn. Kiểm tra đường viền và khoảng trống, giữ bản chính, rồi xác minh chỉnh sửa phần có tên cùng SVG đã lưu trong quy trình nhận.