Làm cách nào để chia tỷ lệ SVG cứng đầu được nhúng với thẻ <object>?

114

Tôi có một số tệp SVG chỉ định widthvà heightcũng như viewboxthế này:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

nhưng làm thế nào để hiển thị chúng trong trình duyệt ở kích thước tôi quyết định? Tôi muốn chúng nhỏ hơn và đã thử:

<object width="400" data="image.svg"></object>

nhưng sau đó tôi nhận được thanh cuộn hiển thị.

Nó hoạt động nếu tôi thay đổi các tập tin SVG để thiết lập widthvà heightđể 100%thay vào đó, nhưng tôi muốn quyết định kích thước trong HTML bất kể những gì kích thước được sử dụng trong các tập tin SVG. Điều này có khả thi không?

html  svg 
— Zitrax
nguồn
Tôi bối rối, câu cuối cùng đọc giống như giải pháp bạn đang tìm kiếm? Đặt chiều rộng / chiều cao SVG thành 100% / 100% để HTML xác định khu vực để vẽ nó vào?
— đánh dấu
3
Vấn đề là tôi không tìm thấy cách nào để thay đổi điều này trong thư viện mà tôi sử dụng để tạo tệp svg. Và sẽ có ý nghĩa với tôi nếu tôi có thể ghi đè điều này từ html. Vì vậy, về cơ bản tôi tự hỏi liệu có giải pháp nào khác ngoài việc thay đổi các tệp svg.
— Zitrax

Câu trả lời:

161

Bạn có thể thêm thuộc tính "keepAspectRatio" và "viewBox" vào <svg>thẻ để thực hiện điều này.

Mở tệp .svg trong trình chỉnh sửa và tìm <svg>thẻ. trong thẻ đó, hãy thêm các thuộc tính sau:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Thay thế {width} và {height} bằng một số giá trị mặc định cho viewBox. Tôi đã sử dụng các giá trị từ các thuộc tính "width" và "height" của thẻ SVG và nó dường như hoạt động.

Lưu SVG và bây giờ nó sẽ mở rộng như mong đợi.

Tôi tìm thấy thông tin này ở đây:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

— Jim Keller
nguồn
2
#protip tất cả các bạn cần phải thêm nó này preserveAspectRatio = "xMinYMin đáp ứng"
— samccone
4
@samccone: Có vẻ như chỉ preserveAspectRatio="xMinYMin meet"là không đủ đối với tôi. Tôi cũng cần phải cung cấp một viewBoxnhư đã đề cập trong câu trả lời. Điều đáng tiếc!
— Frerich Raabe
1
Bạn cũng có thể làm preserveAspectRatio="none"nếu bạn muốn kéo dài svg ra theo những cách tùy ý.
— Matt Crinklaw-Vogt
5
Đừng rơi vào vấn đề tương tự như tôi đã làm: "viewbox"! = "ViewBox" :)
— Dr.Ü 14/10/15
Ngoài ra, tôi phải đặt các thuộc tính chiều rộng và chiều cao thực 100%như câu trả lời này đã nêu.
— ComFreek
35

Không có câu trả lời nào được đưa ra ở đây phù hợp với tôi khi tôi hỏi điều này vào năm 2009. Khi tôi gặp vấn đề tương tự một lần nữa, tôi nhận thấy rằng việc sử dụng <img>thẻ và chiều rộng cùng với một svg hoạt động tốt.

<img width="400" src="image.svg">
— Zitrax
nguồn
6
Điều này đơn giản hơn nhiều so với các tùy chọn khác! Trong trường hợp bất kỳ ai tò mò, đây là bảng các trình duyệt có thể xử lý SVG trong thẻ <img> .
— dimo414
5
Đây có thể là đường dẫn tốt nhất nếu không có siêu liên kết nào trong SVG, nếu không, img là không đủ và người ta vẫn phải sử dụng thay thế như nhúng.
— sdupton
12
Khi bạn sử dụng <img>bạn sẽ mất tất cả tương tác với các liên kết, javascript vv
— gilly3
5
Minor: Phần tử img phải tự đóng, tức là <img width="400" src="image.svg"/>.
— Jan Aagaard
4
@JanAagaard: Không bắt buộc phải đóng thẻ img ngoại trừ trong XHTML.
— Peter V. Mørch,
9

Bạn có thể truy cập vào svg được nhúng bằng JavaScript:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Vì svg của bạn đã có viewBox, Firefox sẽ chia tỷ lệ chiều rộng 576 pixel trong viewBox thành chiều rộng 400 pixel trong tài liệu của bạn. Các svg khác có thể được hưởng lợi từ một viewBox mới bắt nguồn từ chiều rộng và chiều cao được quảng cáo (đây thường là những con số giống nhau). Các trình duyệt khác có thể được hưởng lợi từ các chỉnh sửa svg khác nhau.

— joeforker
nguồn
1
Điều này đã mang lại cho tôi:Security error: attempted to read protected variable
— Zitrax
1
Svg có được lưu trữ trên cùng một miền với trang web của bạn không?
— joeforker
1
Nó không phải (localhost thành bên ngoài) nên có thể là như vậy, tuy nhiên, tôi đã sử dụng câu trả lời của mình bên dưới vì nó đơn giản hơn.
— Zitrax
9 
<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img / logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Thiết lập này đã làm việc cho tôi.

— H Titan
nguồn
Điều này thực sự hoạt động khá tốt! Điều thực sự quan trọng là thực sự xác định viewBox="0 0 640 80". Rõ ràng nếu điều này không được xác định, bạn không thể thực sự mở rộng quy mô nó hoặc để CSS mở rộng quy mô cho bạn bằng cách sử dụng ví dụ, width: 100%v.v.
— Igor
8

Tôi đã gặp sự cố trong đó iOS trên iPad không thay đổi kích thước chính xác hình ảnh SVG trong <object>thẻ.

Kiểu CSS sẽ tăng hoặc giảm kích thước của vùng <object>chứa, nhưng hình ảnh bên trong vùng chứa sẽ không bị sửa đổi (trên iPad, iOS 7).

Các hình ảnh SVG đã được xuất từ ​​Adobe Illustrator và giải pháp hóa ra là thay thế chiều rộng và chiều cao bằng:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

với:

width="100%" height="100%"

Tôi cần sử dụng <object>thẻ vì <img>thẻ hiện không hỗ trợ nhúng hình ảnh được ánh xạ bit vào SVG.

— Andrew Swift
nguồn
Đây là câu trả lời chính xác, đặc biệt nếu bạn có SVG nội dòng và không sử dụng thẻ <img! Hoàn hảo!
— Greg Ellis
5

  1. Đặt hộp xem bị thiếu và điền vào các giá trị chiều cao và chiều rộng của các thuộc tính chiều cao và chiều cao đã đặt trong thẻ svg

  2. Sau đó, chia tỷ lệ hình ảnh đơn giản bằng cách đặt chiều cao và chiều rộng thành các giá trị phần trăm mong muốn . Chúc may mắn.

  3. Bạn có thể đặt tỷ lệ khung hình cố định với đáp ứng keepAspectRatio = "x200Y200, nhưng không cần thiết

ví dụ

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">
— Lorenz Lo Sauer
nguồn
3

Chỉ cần sử dụng CSS để làm cho trình duyệt thay đổi kích thước SVG! Giống như vậy: <object style="width:30%"> Xem http://www.vlado-do.de/svg_test/ để biết thêm chi tiết. Tôi cũng vừa thử nó cục bộ với một SVG có chiều rộng và chiều cao được cho trong "pt". Nó hoạt động tốt trên Firefox.

— Vlado
nguồn
1

Để xem. Tôi phải làm mới bộ nhớ của mình trên SVG, tôi đã không sử dụng nó nhiều năm nay.

Từ những gì tôi tìm thấy ngày hôm nay, có vẻ như nếu bạn chỉ định kích thước của các đối tượng không có đơn vị, chúng có kích thước cố định (theo tôi là pixel). Rõ ràng, không có cách nào để thay đổi kích thước chúng khi bạn thay đổi kích thước SVG (nó chỉ thay đổi kích thước khung nhìn / canvas).

Trừ khi, như đã chỉ ra, bạn chỉ định kích thước của SVG theo phần trăm HOẶC chỉ định một viewBox (ví dụ: viewBox = "0 0 600 500").

Bây giờ, nếu bạn không có cách nào để thay đổi SVG đã xuất, tôi e rằng bạn đã hết may mắn. Bạn sử dụng thư viện nào?

— PhiLho
nguồn
Phần phụ trợ svg trong matplotlib. Tôi đã thử các hàm như set_figwidth (val) nhưng nó có vẻ không hoạt động, nhưng tôi không quen thuộc lắm với thư viện này nên có thể tôi đang nhìn nhầm các hàm.
— Zitrax
1

Đây là một giải pháp PHP sử dụng QueryPath dựa trên câu trả lời của Jim Keller.

Sau khi QueryPath được tải, chỉ cần chuyển tập lệnh svg của bạn vào hàm.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
— Dieter Gribnitz
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.