Định vị SVG như vị trí: tuyệt đối

Question

Tôi đang cố định vị trí một phần tử bên trong bên trong phần tử gốc. Phần tử gốc được đặt thành 100% cao và rộng 100%. Tuy nhiên, tôi muốn svg bên trong là 10px hoặc hơn từ cạnh của svg bên ngoài - tất cả ngoại trừ cạnh phải, mà tôi muốn là 200px từ cạnh bên phải bên ngoài. Tôi muốn điều này để hiển thị trong một trình duyệt web và do đó người dùng sẽ có thể thay đổi kích thước trình duyệt và do đó các svg bên ngoài trong khi svg bên trong sẽ có thể duy trì khoảng cách chính xác từ bên ngoài svg trên mỗi bên.

Như thế này:

+OUTER SVG------------------------------------------+ 
|             | 
| +INNER SVG----------------+     | 
| |       |     | 
| |       |  200px   | 
| |       | <---+-----+----> | 
| |       |     | 
| |       |     | 1 
| |       |     | 0 
| |       |     | 0 
| |       |     | % 
| |       |     | 
| |       |     | h 
| |       |     | i 
| +-------------------------+     | g 
|             | h 
|             | 
+---------------------------------------------------+ 
        100% Wide 

Có thể làm điều này với một mình SVG?

Answer 1

Nếu tôi hiểu chính xác bạn, điều này là không quan trọng. SVG được xây dựng để có nhiều yếu tố hình ảnh trong một ngăn xếp Z, căn chỉnh, chồng lên nhau, bất cứ thứ gì.

Sử dụng Inkscape, miễn phí và mã nguồn mở, để tạo SVG và sau đó bạn có thể chỉnh sửa tệp trực tiếp trong trình soạn thảo văn bản nếu bạn muốn xem cách SVG được tạo. Trong Inkscape bạn có thể sử dụng các công cụ căn chỉnh, lưới, công cụ biến đổi tỷ lệ, kéo và thả, và có thể một số công cụ khác để thực hiện việc này.