คำถามติดแท็ก svg

ฉันควรใช้<img>, <object>หรือ<embed>สำหรับการโหลดไฟล์ SVG ลงในหน้าในลักษณะที่คล้ายกับการโหลดjpg, gifหรือpng? รหัสสำหรับแต่ละรายการเพื่อให้แน่ใจว่าทำงานได้ดีที่สุดเท่าที่จะเป็นไปได้ (ฉันเห็นการอ้างอิงถึงการรวม mimetype หรือการชี้ไปที่ตัวแสดง SVG ทางเลือกในการวิจัยของฉันและไม่เห็นการอ้างอิงศิลปะที่ดี) สมมติว่าฉันกำลังตรวจสอบการสนับสนุน SVG กับModernizrและถอยกลับ (อาจทำการแทนที่ด้วย<img>แท็กธรรมดา) สำหรับเบราว์เซอร์ที่ไม่รองรับ SVG

603 html  svg  vector-graphics 

เมื่อใดควรใช้ไฟล์ภาพบางประเภทเมื่อสร้างเว็บไซต์หรือส่วนต่อประสาน ฯลฯ จุดแข็งและจุดอ่อนของพวกเขาคืออะไร ฉันรู้ว่า PNG & GIF นั้นไม่มีความสูญเสียในขณะที่ JPEG กำลังสูญเสีย แต่ความแตกต่างหลักระหว่าง PNG และ GIF คืออะไร ทำไมฉันถึงต้องเลือกอันหนึ่งมากกว่าอีกอัน? SVG คืออะไรและฉันควรใช้เมื่อใด หากคุณไม่สนใจพิกเซลแต่ละพิกเซลคุณควรใช้ JPEG ตลอดเวลาหรือไม่เพราะเป็น "ที่เบาที่สุด"

575 image  svg  png  jpeg  gif 

อะไรคือวิธีที่ดีที่สุดในการสร้างองค์ประกอบต่าง ๆ ในทันทีและสามารถขยับไปมาได้? ตัวอย่างเช่นสมมติว่าฉันต้องการสร้างสี่เหลี่ยมผืนผ้าวงกลมและรูปหลายเหลี่ยมจากนั้นเลือกวัตถุเหล่านั้นแล้วย้ายไปรอบ ๆ ผมเข้าใจว่า HTML5 ให้สามองค์ประกอบที่สามารถทำให้เป็นไปได้: SVG , ผ้าใบและdiv สำหรับสิ่งที่ฉันต้องการจะทำสิ่งใดองค์ประกอบหนึ่งเหล่านั้นจะให้ประสิทธิภาพที่ดีที่สุด เพื่อเปรียบเทียบวิธีการเหล่านี้ฉันคิดว่าจะสร้างหน้าเว็บที่เหมือนกันสามหน้าซึ่งแต่ละแห่งมีส่วนหัวส่วนท้ายวิดเจ็ตและเนื้อหาข้อความ วิดเจ็ตในหน้าแรกจะถูกสร้างขึ้นอย่างสมบูรณ์ด้วยcanvasองค์ประกอบส่วนที่สองพร้อมsvgองค์ประกอบและส่วนที่สามคือdivองค์ประกอบธรรมดาHTML และ CSS

476 javascript  html  svg  html5-canvas 

Наэтотвопросестьответына Stack Overflow нарусском นี่เป็นคำถามและคำตอบเกี่ยวกับโค้ดที่ใช้งานได้ง่าย ขณะนี้ยังไม่มีวิธีที่ง่ายในการฝังภาพ SVG แล้วเข้าถึงองค์ประกอบ SVG ผ่าน CSS มีวิธีการต่างๆในการใช้เฟรมเวิร์ก JS SVG แต่มีความซับซ้อนมากเกินไปหากสิ่งที่คุณทำคือการสร้างไอคอนอย่างง่ายพร้อมสถานะโรลโอเวอร์ ดังนั้นนี่คือสิ่งที่ฉันคิดขึ้นมาซึ่งฉันคิดว่าเป็นวิธีที่ง่ายที่สุดในการใช้ไฟล์ SVG บนเว็บไซต์ มันใช้แนวคิดจากวิธีการเปลี่ยนข้อความเป็นรูปภาพในระยะแรก แต่เท่าที่ฉันรู้ว่ายังไม่เคยทำสำหรับ SVG นี่คือคำถาม: ฉันจะฝัง SVG และเปลี่ยนสีใน CSS ได้อย่างไรโดยไม่ต้องใช้เฟรมเวิร์ก JS-SVG

437 jquery  css  svg 

เป็นไปได้หรือไม่ที่จะกำหนดความโปร่งใสหรือระดับอัลฟ่าบนสีเติม SVG? ฉันได้ลองเพิ่มค่าสองค่าในแท็กการเติม (เปลี่ยนจากfill="#044B94"เป็นfill="#044B9466") แต่วิธีนี้ใช้ไม่ได้

416 colors  svg  transparency  alpha  fill 

ฉันมีไฟล์ SVG ที่มีขนาดที่กำหนดเป็น 16x16 เมื่อฉันใช้โปรแกรมแปลงของ ImageMagick เพื่อแปลงเป็น PNG ฉันจะได้ PNG ขนาด 16x16 พิกเซลซึ่งเล็กเกินไป: convert test.svg test.png ฉันต้องระบุขนาดพิกเซลของเอาต์พุต PNG -sizeดูเหมือนว่าจะถูกละเว้น-scaleพารามิเตอร์จะปรับขนาด PNG หลังจากแปลงเป็น PNG แล้ว ผลลัพธ์ที่ดีที่สุดจนถึงตอนนี้ฉันได้รับโดยใช้-densityพารามิเตอร์: convert -density 1200 test.svg test.png แต่ฉันไม่พอใจเพราะฉันต้องการระบุขนาดผลลัพธ์เป็นพิกเซลโดยไม่ใช้คณิตศาสตร์เพื่อคำนวณค่าความหนาแน่น ดังนั้นฉันต้องการทำสิ่งนี้: convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png ดังนั้นพารามิเตอร์เวทมนต์ที่ฉันต้องใช้ที่นี่คืออะไร?

388 svg  imagemagick  png 

เป็นไปได้ไหมที่จะตั้งค่า shadow drop สำหรับองค์ประกอบ svg โดยใช้ css3 box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; ฉันเห็นคำพูดบางอย่างเกี่ยวกับการสร้างเงาโดยใช้เอฟเฟกต์ฟิลเตอร์ มีตัวอย่างของการใช้ CSS เพียงอย่างเดียว ด้านล่างเป็นรหัสการทำงานที่มีการใช้สไตล์ cusor อย่างถูกต้อง แต่ไม่มีเอฟเฟกต์เงา โปรดช่วยฉันในการรับเอฟเฟกต์เงาด้วยโค้ดน้อยที่สุด svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" …

379 html  css  svg  svg-filters 

Apple iPad Mini เป็น iPad 2 ที่มีขนาดเล็กกว่าในแบบที่เราต้องการ ใน JavaScript window.navigatorวัตถุแสดงค่าเดียวกันสำหรับ Mini และ iPad 2 การทดสอบของฉันจนถึงการตรวจสอบความแตกต่างไม่ได้นำไปสู่ความสำเร็จ ทำไมสิ่งนี้จึงสำคัญ เนื่องจากหน้าจอ iPad Mini และ iPad 2 เหมือนกันเป็นพิกเซล แต่แตกต่างกันไปตามขนาดจริง (นิ้ว / เซนติเมตร) ดังนั้นจึงแตกต่างกันไปในPPI (พิกเซลต่อนิ้ว) เพื่อให้เว็บแอปพลิเคชันและเกมมีส่วนต่อประสานกับผู้ใช้ที่เป็นมิตรองค์ประกอบบางอย่างจะถูกปรับขนาดเทียบกับตำแหน่งนิ้วหัวแม่มือหรือนิ้วมือของผู้ใช้ดังนั้นเราอาจต้องการปรับขนาดรูปภาพหรือปุ่มบางอย่างเพื่อให้ประสบการณ์การใช้งานที่ดียิ่งขึ้น สิ่งที่ฉันได้ลองมาแล้ว (รวมถึงวิธีการที่ชัดเจนบางอย่าง): window.devicepixelratio ความกว้างองค์ประกอบ CSS หน่วยเซนติเมตร ข้อความค้นหาสื่อ CSS (เช่นresolutionและ-webkit-device-pixel-ratio) ภาพวาด SVG ในหน่วยที่คล้ายกัน การทำ CSS webkit แปลงทุกประเภทตามเวลาที่กำหนดและนับเฟรมที่แสดงผลด้วยrequestAnimFrame(ฉันหวังว่าจะตรวจสอบความแตกต่างที่วัดได้) ฉันสดจากความคิด แล้วคุณล่ะ? อัปเดต ขอบคุณสำหรับคำตอบ …

376 javascript  html  ipad  svg 

HTML <img src="logo.svg" alt="Logo" class="logo-img"> CSS .logo-img path { fill: #000; } svg โหลดด้านบนและเป็นค่าเริ่มต้นfill: #fffแต่เมื่อฉันใช้ด้านบนcssเพื่อลองเปลี่ยนเป็นสีดำจะไม่เปลี่ยนนี่เป็นครั้งแรกที่ฉันเล่นกับ SVG และฉันไม่แน่ใจว่าทำไมมันไม่ทำงาน

373 css  image  svg 

ฉันต้องการใช้เทคนิคนี้http://css-tricks.com/svg-fallbacks/และเปลี่ยนสี svg แต่จนถึงตอนนี้ฉันยังไม่สามารถทำได้ ฉันใส่มันลงใน CSS แต่ภาพของฉันจะเป็นสีดำเสมอไม่ว่าอะไรก็ตาม รหัสของฉัน: .change-my-color { fill: green; } <svg> <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> </svg> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

350 css  svg 

ฉันต้องการแปลง SVG เป็นภาพบิตแมป (เช่น JPEG, PNG, ฯลฯ ) ผ่านทาง JavaScript

299 javascript  svg 

ฉันใช้ jQuery SVG ฉันไม่สามารถเพิ่มหรือลบคลาสไปยังวัตถุ ใครทราบความผิดพลาดของฉัน SVG: <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" /> jQuery ที่จะไม่เพิ่มคลาส: $(".jimmy").click(function() { $(this).addClass("clicked"); }); ฉันรู้ว่า SVG และ jQuery ทำงานร่วมกันได้ดีเพราะฉันสามารถกำหนดเป้าหมายวัตถุและเริ่มการแจ้งเตือนเมื่อมีการคลิก: $(".jimmy").click(function() { alert('Handler for .click() called.'); });

289 javascript  jquery  css  svg  jquery-svg 

เป็นไปได้หรือไม่ที่จะใช้คำนิยาม SVG แบบอินไลน์ใน CSS? ฉันหมายถึงสิ่งที่ชอบ: .my-class { background-image: <svg>...</svg>; }

284 css  svg 

การวางเอาต์พุต SVG โดยตรงโดยใช้โค้ดเพจฉันสามารถแก้ไขสีเติมด้วย CSS ได้เช่น: polygon.mystar { fill: blue; }​ circle.mycircle { fill: green; } สิ่งนี้ใช้งานได้ดี แต่ฉันกำลังมองหาวิธีในการแก้ไขแอตทริบิวต์ "เติม" ของ SVG เมื่อมันถูกใช้เป็นแบ็คกราวด์ - ภาพ html { background-image: url(../img/bg.svg); } ฉันจะเปลี่ยนสีได้อย่างไรตอนนี้ เป็นไปได้ไหม สำหรับการอ้างอิงต่อไปนี้เป็นเนื้อหาของไฟล์ SVG ภายนอกของฉัน: <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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 …

270 html  css  svg 

ปิด คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ไม่ยอมรับคำตอบในขณะนี้ ปิดให้บริการใน4 ปีที่แล้ว ล็อคแล้ว คำถามและคำตอบของคำถามนี้ถูกล็อคเนื่องจากคำถามอยู่นอกหัวข้อ แต่มีความสำคัญทางประวัติศาสตร์ ขณะนี้ไม่ยอมรับคำตอบหรือการโต้ตอบใหม่ วิธีการแปลงภาพ PNG เป็น SVG?

266 svg  png