2012-09-17 41 views
19

Tôi đang chơi đùa với các hướng dẫn SVG và tôi chỉ đơn giản là nạp một hình ảnh như thế này:SVG: kéo dài một hình ảnh

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg style="stroke-linejoin:round; stroke:black; stroke-width:0.5pt; text-anchor:middle; fill:none" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica, Arial, FreeSans, Sans, sans, sans-serif" height="400px" width="400px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250"> 
    <rect y="0" x="0" height="250" width="250" stroke="black" stroke-width="1" fill="blue" /> 
    <image y="0" x="0" height="250" width="250" xlink:href="http://www.blueprintmodel.co.uk/images/DSCF1438.jpg" /> 
</svg> 

tôi nhận được hình ảnh ở trung tâm của viewBox, hơn "rect", ngay cả khi chiều cao và chiều rộng là như nhau. Câu hỏi của tôi là:

  • Làm cách nào để kéo dài hình ảnh thành kích thước?
  • Tại sao "chiều cao" trong thẻ "hình ảnh" không thực hiện công việc?
  • Có chuyển đổi như "căng" hay "thay đổi kích thước" mà tôi có thể sử dụng không? (Tôi không thể tìm thấy chúng)
+0

thử thuộc tính biến đổi như transform = "scale (2)" trên hình ảnh – philipp

+0

Tôi đã thử điều đó, nhưng điều tôi cần là kéo dài nó thành 250x250, vì vậy, nó có thể hoạt động nhưng trong trường hợp đó tôi cần để biết định dạng của hình ảnh, ví dụ nếu pic là 4: 2, transform = "scale (0.5)" sẽ làm điều đó. Vấn đề là tôi cần nó cho bất kỳ hình ảnh. – Aleksandar

Trả lời

45

thiết preserveAspectRatio = "none" trên các yếu tố svg.

+0

Vậy đó. Cảm ơn bạn. – Aleksandar

+2

Lưu ý rằng điều này có thể không hoạt động đối với một số trình duyệt (và nhiều thiết bị di động). @Aleksandar –

Các vấn đề liên quan