Có thể tạo lại loại gradient mờ này trong một SVG không?
Thực hiện gradient SVG
Câu trả lời:
Có và không.
Có thể tạo lưới gradient trong Inkscape và lưu nó dưới dạng SVG. Tuy nhiên, các tiêu chuẩn SVG được sử dụng trong các trình duyệt chưa hỗ trợ các lưới gradient. Điều này có thể thay đổi trong tương lai, nhưng hiện tại thì không.
Một phương pháp khác hoạt động trong trình duyệt, là thêm một số vật thể rắn, làm mờ chúng và đặt chúng vào mặt nạ cắt. Đây vẫn là một giải pháp vector thuần túy, nó không được rasterized.
Đây là SVG cho phiên bản hoạt động trong trình duyệt, nếu bạn muốn.
Chỉnh sửa : liên kết trên đến SVG không còn khả dụng, vì vậy tôi đã xóa nó.
Thật tuyệt! SVG trong liên kết không có vẻ gì giống như phần chèn được cung cấp trong câu trả lời của bạn, tuy nhiên ... nó trông nhẹ hơn nhiều. Bất kỳ lý do cho điều này?
—
Jared Garcia
@JaredGarcia Tôi không biết tại sao - chụp màn hình của tôi khớp chính xác với SVG trên máy tính của tôi trong Inkscape - nhưng hãy chắc chắn rằng bạn đang sử dụng phiên bản Inkscape mới nhất - hiện tại là phiên bản 0.92
—
Billy Kerr
Ah, tôi đã xem nó trên trình duyệt trên điện thoại di động của tôi từ liên kết tải xuống đó. Tôi sẽ mở nó trong Inkscape và xem thử.
—
Jared Garcia
@JaredGarcia gửi bài đó như một câu hỏi mới để có thể trả lời đúng.
—
Andrew T.
Làm mờ trong các trình duyệt là thực sự tốn kém. Bạn có thể có được hiệu ứng tương tự bằng cách phân lớp độ dốc nền. Đây thậm chí là hoạt hình. Và bạn có thể sử dụng chế độ trộn nền để có thêm hiệu ứng trong các trình duyệt hiện đại.
—
PieBie
Nó có thể được tạo trong Illustrator và Inkscape dưới dạng lưới Gradient. Khi được lưu dưới dạng SVG trong Illustrator kế thừa, nó đã chuyển thành hình ảnh bitmap. Rõ ràng Illustator biết điều đó khoảng 6 năm trước, nhưng ngôn ngữ SVG thì không.
Khi được lưu trong Inkscape dưới dạng SVG đơn giản, không phải là Inkscape SVG, nó vẫn ở dạng lưới gradient và mở tệp SVG bằng trình soạn thảo văn bản cho thấy có lệnh nâng cấp. Xem đoạn mã
Vì vậy, không cần biết các tiêu chuẩn, tôi có thể nói "Ít nhất nó được thực hiện trong SVG đơn giản của Inkscape."
Hy vọng ai đó lập trình viên nhận biết tình trạng phát triển SVG nói điều gì đó chính xác.
Bạn có thể trực tiếp bao gồm mã ở đây với định dạng mã thích hợp. Không cần phải đăng ảnh chụp màn hình.
—
Wrzlprmft
Đáng buồn thay, các lưới gradient của Inkscape chưa được hỗ trợ trong Google Chrome hoặc Firefox.
—
Billy Kerr
Bạn có thể đăng mã svg
—
Jared Garcia
@JaredGarcia Tôi không có nó. Tôi chỉ điền vào 10 nút 25 để thấy rằng nó mang lại cái nhìn đúng đắn. Bạn có thể tự làm nó. Nhập hình ảnh vào Inkscape, tạo một hình vuông có cùng kích thước, đặt loại điền = lưới gradient, thêm 3 hàng và cột nhiều hơn bằng công cụ lưới, với công cụ nút chọn từng nút một và với công cụ chọn màu lấy màu từ hình ảnh nhập khẩu. Lưu dưới dạng SVG đơn giản, mở trong Win Notepad để xem mã.
—
dùng287001
Nếu mục tiêu của bạn là có một gradient lưới nhẹ, có thể mở rộng thì bạn có thể thử phương pháp này:
https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html
Nó không phải là vector nhưng cũng có thể là do kích thước tệp siêu nhỏ và hình ảnh có tỷ lệ vô hạn.
Chào mừng bạn đến với GDSE - glaf để có bạn ở đây! Vui lòng xem qua chuyến tham quan và hiểu được cách chúng tôi muốn hỏi Cách hỏi và trả lời Cách trả lời câu hỏi. Có lẽ bạn cũng nên xem xét các mã hành vi tổng thể trong khi bạn đang tìm trung tâm trợ giúp tròn Câu trả lời của bạn là một câu trả lời tốt về khả năng áp dụng những gì bạn đã chia sẻ, nhưng ở đây tại GDSE, chúng tôi chỉ sử dụng các liên kết để tham khảo hoặc để liên kết các tài nguyên, khi các liên kết thay đổi hoặc biến mất quá dễ dàng: bạn có thể tóm tắt nội dung bạn đang buộc trong cơ thể bạn trả lời không?
—
GerardFalla