ฉันจะปรับขนาด SVG ที่ดื้อรั้นที่ฝังด้วยแท็ก <object> ได้อย่างไร

115

ฉันมีไฟล์ SVG ที่ระบุwidthและheightเป็นviewboxแบบนี้:

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

แต่จะแสดงผลในเบราว์เซอร์ในขนาดที่ฉันตัดสินใจได้อย่างไร ฉันต้องการให้มันเล็กลงและได้ลอง:

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

แต่แล้วฉันก็เห็นแถบเลื่อนที่มองเห็นได้

ใช้งานได้ถ้าฉันเปลี่ยนไฟล์ SVG เพื่อตั้งค่าwidthและheightเป็น100%แทน แต่ฉันต้องการกำหนดขนาดใน HTML โดยไม่คำนึงถึงขนาดที่ใช้ในไฟล์ SVG เป็นไปได้หรือไม่

html svg

— Zitrax
แหล่งที่มา

ฉันสับสนประโยคสุดท้ายอ่านว่าทางออกที่คุณกำลังค้นหาอยู่หรือเปล่า? ตั้งค่าความกว้าง / ความสูง SVG เป็น 100% / 100% ปล่อยให้ HTML กำหนดพื้นที่ที่จะวาดหรือไม่

— ทำเครื่องหมาย

3

ปัญหาคือฉันไม่พบวิธีเปลี่ยนแปลงสิ่งนี้ในไลบรารีที่ฉันใช้สร้างไฟล์ svg และมันจะสมเหตุสมผลสำหรับฉันถ้าฉันสามารถลบล้างสิ่งนี้จาก html โดยพื้นฐานแล้วฉันสงสัยว่ามีวิธีอื่นนอกเหนือจากการเปลี่ยนไฟล์ svg หรือไม่

— Zitrax

162

คุณสามารถเพิ่มแอตทริบิวต์ "reserveAspectRatio" และ "viewBox" ลงใน<svg>แท็กเพื่อให้บรรลุเป้าหมายนี้

เปิดไฟล์. svg ในโปรแกรมแก้ไขและค้นหา<svg>แท็ก ในแท็กนั้นให้เพิ่มแอตทริบิวต์ต่อไปนี้:

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

แทนที่ {width} และ {height} ด้วยค่าเริ่มต้นบางอย่างสำหรับ viewBox ฉันใช้ค่าจากแอตทริบิวต์ "width" และ "height" ของแท็ก SVG และดูเหมือนว่าจะได้ผล

บันทึก SVG และตอนนี้ควรปรับขนาดตามที่คาดไว้

ฉันพบข้อมูลนี้ที่นี่:

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

— จิมเคลเลอร์
แหล่งที่มา

2

#protip ทั้งหมดที่คุณต้องเพิ่มไว้ในนี้ preserveAspectRatio = "xMinYMin meet"

— samccone

4

@samccone: ดูเหมือนว่าpreserveAspectRatio="xMinYMin meet"จะไม่เพียงพอสำหรับฉัน ฉันยังต้องระบุviewBoxตามที่ระบุไว้ในคำตอบ น่าเสียดาย!

— Frerich Raabe

1

นอกจากนี้คุณยังสามารถทำได้preserveAspectRatio="none"หากคุณต้องการยืด svg ออกไปโดยพลการ

— Matt Crinklaw-Vogt

5

อย่าตกอยู่ในปัญหาเดียวกันกับที่ฉันทำ: "viewbox"! = "viewBox" :)

— Dr.Ü

นอกจากนี้ฉันต้องตั้งค่าแอตทริบิวต์ความกว้างและความสูงจริง100%ตามที่คำตอบนี้ระบุไว้

— ComFreek

35

ไม่มีคำตอบใดที่ให้ไว้ที่นี่สำหรับฉันเมื่อฉันถามสิ่งนี้ในปี 2009 เนื่องจากตอนนี้ฉันมีปัญหาเดียวกันอีกครั้งฉันสังเกตเห็นว่าการใช้<img>แท็กและความกว้างร่วมกับ svg ทำงานได้ดี

<img width="400" src="image.svg">

— Zitrax
แหล่งที่มา

6

นี่ง่ายกว่าตัวเลือกอื่น ๆ มาก! ในกรณีที่ใครก็ตามที่สงสัยนี่คือตารางที่เบราว์เซอร์สามารถจัดการ SVG ในแท็ก <img>ได้

— dimo414

5

นี่อาจเป็นเส้นทางที่ดีที่สุดหากไม่มีการเชื่อมโยงหลายมิติใน SVG มิฉะนั้น img จะไม่เพียงพอและยังต้องใช้ทางเลือกอื่นเช่นการฝัง

— sdupton

12

เมื่อคุณใช้<img>คุณสูญเสียการโต้ตอบทั้งหมดกับลิงก์จาวาสคริปต์ ฯลฯ

— gilly3

5

ไมเนอร์การ img <img width="400" src="image.svg"/>องค์ประกอบควรจะปิดตัวเองคือ

— Jan Aagaard

4

@JanAagaard: ไม่จำเป็นต้องปิดแท็ก imgยกเว้นใน XHTML

— Peter V.Mørch

9

คุณสามารถเข้าถึง svg ที่ฝังไว้โดยใช้ JavaScript:

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

เนื่องจาก svg ของคุณมี viewBox อยู่แล้ว Firefox ควรปรับขนาดความกว้าง 576 พิกเซลใน viewBox เป็นความกว้าง 400 พิกเซลในเอกสารของคุณ svgs อื่น ๆ อาจได้รับประโยชน์จาก viewBox ใหม่ที่ได้มาจากความกว้างและความสูงที่โฆษณา (ซึ่งมักเป็นตัวเลขเดียวกัน) เบราว์เซอร์อื่น ๆ อาจได้รับประโยชน์จากการปรับแต่ง svg ที่แตกต่างกัน

— joeforker
แหล่งที่มา

1

สิ่งนี้ทำให้ฉัน:Security error: attempted to read protected variable

— Zitrax

1

svg โฮสต์บนโดเมนเดียวกับเว็บเพจของคุณหรือไม่

— joeforker

1

ไม่ใช่ (localhost ไปยังภายนอก) ดังนั้นอาจเป็นไปได้อย่างไรก็ตามฉันลงเอยด้วยการใช้คำตอบด้านล่างเพราะง่ายกว่า

— 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" />

การตั้งค่านี้ใช้ได้ผลสำหรับฉัน

— H ไททัน
แหล่งที่มา

สิ่งนี้ใช้งานได้ดีทีเดียว! viewBox="0 0 640 80"สิ่งที่สำคัญจริงๆคือการกำหนดจริง เห็นได้ชัดว่าหากไม่ได้กำหนดสิ่งนี้คุณจะไม่สามารถปรับขนาดได้จริงหรือให้ CSS ปรับขนาดให้คุณโดยใช้เช่นwidth: 100%ฯลฯ

— อิกอร์

8

ฉันพบปัญหาที่ iOS บน iPad ปรับขนาดภาพ SVG ใน<object>แท็กไม่ถูกต้อง

สไตล์ CSS จะเพิ่มหรือลดขนาดของ<object>คอนเทนเนอร์ แต่รูปภาพภายในจะไม่ถูกแก้ไข (บน iPad, iOS 7)

ภาพ SVG ถูกส่งออกจาก Adobe Illustrator และวิธีแก้ปัญหานี้เปลี่ยนความกว้างและความสูงในสิ่งนี้:

<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">

ด้วย:

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

ฉันจำเป็นต้องใช้<object>แท็กเนื่องจาก<img>ขณะนี้แท็กไม่รองรับการฝังภาพบิตแมปใน SVG

— Andrew Swift
แหล่งที่มา

นี่เป็นคำตอบที่ถูกต้องโดยเฉพาะอย่างยิ่งหากคุณมี SVG แบบอินไลน์และไม่ใช้แท็ก <img! ที่สมบูรณ์แบบ!

— Greg Ellis

5

ตั้งค่าช่องมองที่หายไปและกรอกค่าความสูงและความกว้างของแอตทริบิวต์ความสูงและความสูงที่ตั้งไว้ในแท็ก svg
จากนั้นปรับขนาดรูปภาพโดยตั้งค่าความสูงและความกว้างเป็นค่าเปอร์เซ็นต์ที่ต้องการ โชคดี.
คุณสามารถกำหนดอัตราส่วนคงที่โดยใช้ presaveAspectRatio = "x200Y200 meet แต่ไม่จำเป็น

เช่น

 <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">

— ลอเรนซ์โลเซาเออร์
แหล่งที่มา

3

เพียงแค่ใช้ CSS เพื่อทำให้เบราว์เซอร์ปรับขนาด SVG! เช่นนั้น: <object style="width:30%"> ดูhttp://www.vlado-do.de/svg_test/สำหรับรายละเอียดเพิ่มเติม ฉันเพิ่งลองใช้ในเครื่องด้วย SVG ที่มีความกว้างและความสูงกำหนดเป็น "pt" ทำงานได้ดีใน Firefox

— Vlado
แหล่งที่มา

1

มาดูกัน. ฉันต้องรีเฟรชหน่วยความจำของฉันบน SVG ฉันไม่ได้ใช้มันมากนักในช่วงหลายปีที่ผ่านมา

จากสิ่งที่ฉันพบในวันนี้ดูเหมือนว่าถ้าคุณระบุขนาดของวัตถุโดยไม่มีหน่วยพวกมันจะมีขนาดคงที่ (ฉันคิดว่าเป็นพิกเซล) เห็นได้ชัดว่าไม่มีวิธีใดที่จะปรับขนาดได้เมื่อคุณปรับขนาด SVG (เปลี่ยนเฉพาะขนาดวิวพอร์ต / ผ้าใบ)

เว้นแต่จะระบุไว้คุณระบุขนาดของ SVG เป็นเปอร์เซ็นต์หรือระบุ viewBox (เช่น viewBox = "0 0 600 500")

ตอนนี้ถ้าคุณไม่มีวิธีเปลี่ยน SVG ที่ส่งออกคุณก็โชคไม่ดีฉันกลัว คุณใช้ห้องสมุดอะไร

— PhiLho
แหล่งที่มา

แบ็กเอนด์ svg ใน matplotlib ฉันได้ลองใช้ฟังก์ชันเช่น set_figwidth (val) แล้ว แต่ดูเหมือนว่าจะใช้งานไม่ได้ แต่ฉันไม่ค่อยคุ้นเคยกับไลบรารีนี้ดังนั้นฉันอาจกำลังดูฟังก์ชันที่ไม่ถูกต้อง

— Zitrax

1

นี่คือโซลูชัน PHP โดยใช้QueryPathตามคำตอบของ Jim Keller

เมื่อโหลด QueryPath แล้วให้ส่งสคริปต์ svg ของคุณไปที่ฟังก์ชัน

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
แหล่งที่มา