Cách căn giữa và chia tỷ lệ tệp SVG bên trong một tệp SVG khác

Question

Tôi đang phát triển một chương trình tạo tệp svg dựa trên các lựa chọn mà người dùng thực hiện. Một trong những sự lựa chọn này là bao gồm một tệp svg khác tập trung vào một điểm cụ thể trong điểm đầu tiên. Tệp thứ hai có tỷ lệ khung hình và kích thước không xác định, nhưng nó phải được chia tỷ lệ thành kích thước tối đa cụ thể dưới dạng chiều cao hoặc chiều rộng và phải được căn giữa trên một điểm cụ thể. Phương pháp tôi sử dụng bây giờ là có thẻ G chứa thẻ SVG của hình ảnh được bao gồm và thực hiện chuyển đổi trên thẻ G để mở rộng và dịch. Có cách nào để thực hiện quy mô để có được kích thước cụ thể mà không biết kích thước của hình ảnh không? Và có cách nào để có tọa độ đã dịch để áp dụng cho trung tâm của hình ảnh thay vì góc trên bên trái không? Tôi rất mới đối với SVG, vì vậy có thể tôi sẽ nói về điều này một cách sai lầm. Có lẽ một cách tốt hơn để có được kết quả tương tự?

Answer 1

Tôi đoán bạn muốn đầu tiên có tập tin SVG khác ẩn, gọi .getBBox() trong JavaScript làm một số tính toán đơn giản, thiết lập các thông số phù hợp, thôi ẩn nó

Answer 2

tôi hiểu những gì bạn có nghĩa là, hoặc ít nhất tôi nghĩ rằng. Không có ý tưởng tốt hơn trong tâm trí của tôi để làm điều đó thay vì nhóm. Đối với tôi <g> là cách tốt nhất để thao tác với một đoạn tài liệu SVG. Nhưng theo ý kiến ​​của tôi, hãy xem xét phần tử <rect> làm vùng chứa cho dữ liệu hình ảnh của bạn. Có lẽ sau đó <g> sẽ không cần thiết, phụ thuộc vào yêu cầu mã hóa của bạn.

Nếu bạn cần phải đặt chỉ hình ảnh SVG đơn giản bạn có thể làm điều đó thích:

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/> 

Nếu bạn thể hiện "width" và "height" trong các đơn vị cố định (ví dụ như pixel), bạn sẽ đạt được những gì tôi m nghĩ bạn cần. Ngoài ra, "preservAspectRatio" là có để xem xét thuộc tính này nếu bạn cần.

Answer 3

Chỉnh sửa: câu trả lời này yêu cầu bạn biết kích thước của SVG bên trong. Cách tách rời nhất là sử dụng phương pháp getBBox() ở phía trình duyệt, có thể sử dụng visibility hoặc display để ngăn người dùng nhìn thấy đồ họa chưa được đánh giá. jsFiddle example được cập nhật để sử dụng phương pháp này.

---

Để mở rộng quy mô, hãy sử dụng viewBox attribute. Từ tài liệu của W3C:

Thường muốn xác định rằng một tập hợp đồ họa được kéo dài để phù hợp với phần tử vùng chứa cụ thể. Thuộc tính ‘viewBox’ cung cấp khả năng này.

Tất cả các yếu tố thiết lập chế độ xem mới (xem elements that establish viewports), ... có thuộc tính 'viewBox'. Giá trị của thuộc tính 'viewBox' là danh sách bốn số <min-x>, <min-y>, <width> và <height>, ... chỉ định hình chữ nhật trong không gian người dùng cần được ánh xạ tới giới hạn của chế độ xem được thiết lập bởi phần tử đã cho, tham gia tài khoản attribute ‘preserveAspectRatio’.

Example ViewBox minh họa việc sử dụng thuộc tính ‘viewBox’ trên phần tử svg ngoài cùng để chỉ định rằng nội dung SVG sẽ kéo dài để vừa với giới hạn của chế độ xem.

Ví dụ trên chỉ định preserveAspectRadio là none, do đó SVG được nhúng trải dài để phù hợp với SVG vùng chứa chính xác. Giá trị mặc định của preserveAspectRadio, là xMidYMid meet, phải phù hợp với nhu cầu của bạn. Thuộc tính này cho phép bạn kiểm soát chi tiết hơn how to scale and position the enclosed graphics.

Khi bạn đã thu nhỏ SVG bên trong thành một kích thước đã biết với viewBox, việc định tâm phải là một phép tính đơn giản và sử dụng thuộc tính transform đúng cách. Dưới đây là một ví dụ bị tước từ http://jsfiddle.net/ento/hPuBY/:

<g transform="translate(125, 125)"> 
    <!-- inner SVG is scaled to fit 150x150 --> 
    <svg width="150" height="150" viewBox="0 0 1500 1000"> 
    <!-- coordinate system inside the SVG is 0x0 <> 1500x1000 --> 
    <rect width="1500" height="1000" /> 
    <text x="750" y="550" font-size="150"> 
     Embedded SVG 
    </text> 
    </svg> 
</g>