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

อะไรคือความแตกต่างระหว่างแอตทริบิวต์ x และ dx ของ svg (หรือ y และ dy) เวลาที่เหมาะสมในการใช้แอตทริบิวต์การเลื่อนแกน (dx) เทียบกับแอตทริบิวต์ตำแหน่ง (x) เมื่อใด ตัวอย่างเช่นฉันสังเกตเห็นตัวอย่าง d3 จำนวนมากที่ทำอะไรแบบนี้ chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") ข้อดีหรือเหตุผลในการตั้งค่าทั้ง y และ dy คืออะไรเมื่อสิ่งต่อไปนี้ดูเหมือนจะทำสิ่งเดียวกัน chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")

107 svg  d3.js 

เมื่อ SVG รวมอยู่ในเอกสารโดยตรงโดยใช้<svg>แท็กคุณสามารถใช้สไตล์ CSS กับ SVG ผ่านสไตล์ชีทของเอกสาร อย่างไรก็ตามฉันกำลังพยายามใช้สไตล์กับ SVG ซึ่งฝังอยู่ (โดยใช้<object>แท็ก) เป็นไปได้ไหมที่จะใช้รหัสต่อไปนี้? object svg { fill: #fff; }

107 html  css  svg 

อะไรกันแน่ที่ไม่enable-backgroundแอตทริบิวต์ทำอย่างไร ฉันอ่านสเปคแล้วแต่ยังไม่เข้าใจ

106 svg 

ฉันต้องการปรับขนาดและหมุนองค์ประกอบบางอย่างในเอกสาร SVG โดยใช้จาวาสคริปต์ ปัญหาคือโดยค่าเริ่มต้นจะใช้การแปลงรอบจุดเริ่มต้นที่(0, 0)- ซ้ายบนเสมอ ฉันจะกำหนดจุดยึดการแปลงนี้ใหม่ได้อย่างไร ฉันพยายามใช้transform-originแอตทริบิวต์ แต่ไม่ส่งผลใด ๆ นี่คือวิธีที่ฉันทำ: svg.getDocumentById('someId').setAttribute('transform-origin', '75 240'); ดูเหมือนจะไม่ได้กำหนดจุดสำคัญเป็นจุดที่ฉันระบุแม้ว่าฉันจะเห็นใน Firefox ว่ามีการตั้งค่าแอตทริบิวต์อย่างถูกต้อง ฉันพยายามสิ่งที่ชอบcenter bottomและ50% 100%มีและไม่มีวงเล็บ จนถึงขณะนี้ไม่มีอะไรทำงาน ใครสามารถช่วย?

105 svg  coordinate-transformation 

ฉันกำลังพยายามนำการไล่ระดับสีไปใช้กับrectองค์ประกอบSVG ขณะนี้ฉันใช้fillแอตทริบิวต์ ในไฟล์ CSS ของฉัน: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } และrectองค์ประกอบมีสีเติมที่ถูกต้องเมื่อดูในเบราว์เซอร์ อย่างไรก็ตามฉันต้องการทราบว่าฉันสามารถใช้การไล่ระดับสีเชิงเส้นกับองค์ประกอบนี้ได้หรือไม่

105 css  svg  gradient  linear-gradients 

ฉันต้องการที่จะสามารถตั้งค่าความกว้างของเส้นขีดในองค์ประกอบ SVG เป็น "การรับรู้พิกเซล" ซึ่งจะต้องกว้าง 1px เสมอไม่ว่าจะใช้การเปลี่ยนแปลงมาตราส่วนในปัจจุบัน ฉันทราบดีว่าสิ่งนี้อาจเป็นไปไม่ได้เนื่องจากจุดรวมของ SVG คือพิกเซลที่ไม่ขึ้นต่อกัน บริบทดังต่อไปนี้: ฉันมีองค์ประกอบ SVG พร้อมชุดแอตทริบิวต์ viewBox และ preserveAspectRatio มันจะเป็นแบบนี้ <svg version="1.1" baseProfile="full" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" > </svg> ซึ่งหมายความว่าเมื่อฉันปรับขนาดองค์ประกอบนั้นรูปร่างที่แท้จริงภายในจะปรับขนาดตามนั้น (จนถึงตอนนี้ก็ดีมาก) อย่างที่คุณเห็นฉันได้ตั้งค่า viewBox เพื่อให้จุดเริ่มต้นอยู่ตรงกลาง ฉันต้องการวาดแกน x และแกน y ภายในองค์ประกอบนั้นซึ่งฉันจะทำดังนี้: <line x1="-1000" x2="1000" y1="0" y2="0" /> อีกครั้งวิธีนี้ใช้ได้ดี ตามหลักการแล้วแกนนี้จะกว้างเพียง 1px เสมอ …

104 svg  visualization 

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันพยายามแปลงภาพ SVG เป็น PNG โดยใช้ C # โดยไม่ต้องเขียนโค้ดมากเกินไป ใครช่วยแนะนำไลบรารีหรือโค้ดตัวอย่างสำหรับการทำสิ่งนี้ได้บ้าง

104 c#  .net  png  svg 

ฉันมีกราฟิก SVG หลายรายการที่ฉันต้องการแก้ไขสีผ่านสไตล์ชีตภายนอกไม่ใช่ในไฟล์ SVG แต่ละไฟล์โดยตรง ฉันไม่ได้วางกราฟิกไว้ในบรรทัด แต่เก็บไว้ในโฟลเดอร์รูปภาพของฉันและชี้ไปที่พวกเขา ฉันได้ติดตั้งด้วยวิธีนี้เพื่อให้คำแนะนำเครื่องมือทำงานได้และฉันยังรวมแต่ละ<a>แท็กเพื่อให้มีลิงก์ <a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a> และนี่คือรหัสของกราฟิก SVG: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="stylesheets/main.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69"> <g> <path d="M28.44......./> </g> </svg> ฉันใส่สิ่งต่อไปนี้ในไฟล์ …

103 html  css  svg  stylesheet  external 

ฉันต้องการให้สีพื้นหลังของ svg textคล้ายกับbackground-colorใน css ฉันพบเฉพาะเอกสารประกอบfillซึ่งเป็นสีของข้อความเอง เป็นไปได้หรือไม่?

103 css  svg  background-color 

ฉันจะแปลงsvgไปpngในงูใหญ่? ฉันกำลังจัดเก็บsvgในตัวอย่างของStringIO. ฉันควรใช้ไลบรารี pyCairo หรือไม่? ฉันจะเขียนโค้ดนั้นได้อย่างไร?

102 python  svg  rendering  cairo 

ฉันมีเอกสาร SVG และฉันต้องการรวมภาพ svg ภายนอกไว้ในนั้นเช่น: <object data="logo.svgz" width="100" height="100" x="200" y="400"/> ("object" เป็นเพียงตัวอย่าง - เอกสารภายนอกจะเป็น SVG แทนที่จะเป็น xhtml) ความคิดใด ๆ ? เป็นไปได้หรือไม่? หรือเป็นสิ่งที่ดีที่สุดสำหรับฉันเพียงแค่ตบ logo.svg xml ลงในเอกสาร SVG ภายนอก

102 xml  svg  embedding 

การตั้งค่าความกว้างเส้นโครงร่าง: 1 บน a <rect>องค์ประกอบใน SVG จะวางเส้นขีดไว้ที่ทุกด้านของสี่เหลี่ยม หนึ่งจะวางความกว้างเส้นขีดเพียงสามด้านของสี่เหลี่ยมผืนผ้า SVG ได้อย่างไร?

99 html  svg  vector-graphics  inkscape 

ฉันมีปัญหากับ google chrome ไม่แสดง svg ด้วยแท็ก img สิ่งนี้เกิดขึ้นเมื่อรีเฟรชเพจและการโหลดเพจครั้งแรก ฉันสามารถนำรูปภาพมาแสดงโดย "การตรวจสอบองค์ประกอบ" จากนั้นคลิกขวาที่ไฟล์ svg และเปิดไฟล์ svg ในแท็บใหม่ จากนั้นภาพ svg จะแสดงบนหน้าเดิม <img src="../images/Aged-Brass.svg"> สูญเสียโดยสิ้นเชิงที่นี่ว่าปัญหาคืออะไร ภาพ svg แสดงผลได้ดีใน IE9 และ FF ไม่ใช่ใน Chrome หรือ Safari ฉันตั้งค่าประเภท MIME ไว้ด้วย (ภาพ / svg + xml) แก้ไข: นี่คือหน้า html ง่ายๆที่ฉันสร้างขึ้นเพื่อช่วยอธิบายปัญหาของฉัน <!DOCTYPE html> <html> <head> <title>SVG Test</title> <style> …

95 google-chrome  svg 

ดูเหมือนว่ามันควรจะง่าย แต่ฉันไม่ได้รับบางสิ่ง ฉันต้องการสร้างหน้า HTML ที่มีรูปภาพ SVG เพียงรูปเดียวที่ปรับขนาดให้พอดีกับหน้าต่างเบราว์เซอร์โดยอัตโนมัติโดยไม่ต้องเลื่อนใด ๆ และยังคงรักษาอัตราส่วนไว้ ตัวอย่างเช่นในขณะนี้ฉันมีภาพ 1024x768 SVG; หากวิวพอร์ตของเบราว์เซอร์คือ 1980x1000 ฉันต้องการให้รูปภาพแสดงที่ 1333x1000 (เติมในแนวตั้งกึ่งกลางแนวนอน) หากเบราว์เซอร์มีขนาด 800x1000 ฉันต้องการให้แสดงที่ 800x600 (เติมในแนวนอนจัดกึ่งกลางแนวตั้ง) ตอนนี้ฉันได้กำหนดไว้ดังนี้: <body style="height: 100%"> <div id="content" style="width: 100%; height: 100%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMid meet"> ... </svg> </div> </body> อย่างไรก็ตามนี่เป็นการปรับขนาดความกว้างเต็มของเบราว์เซอร์ (สำหรับหน้าต่างกว้าง แต่สั้น) …

94 layout  xhtml  svg  scaling  aspect-ratio 

ฉันสงสัยว่าทำไมเว็บไซต์สมัยใหม่เพียงไม่กี่แห่งยังคงใช้ PNG สำหรับไอคอนเท่านั้น (แต่สมมติฐานนี้เป็นเพียงการสังเกตของฉัน) จนถึงตอนนี้ฉันรู้สาเหตุหลักในการใช้ PNG บน SVG คือ IE8 และ SVG ใช้พลังงาน CPU มากกว่า (แต่ฉันไม่เชื่อว่านี่เป็นปัญหาสำหรับไอคอน 1K ธรรมดา ๆ ) ฉันเห็น (และเราใช้อยู่ในปัจจุบัน) ข้อดีหลายอย่างในการใช้ SVG ไม่ว่าจะใช้เป็นสไปรต์เป็นรูปภาพหรือ SVG แบบอินไลน์ (คำถามกำลังหางานวิจัย: แบบอักษร PNG Sprite vs SVG Sprite vs Iconมุ่งเน้นไปที่ประสิทธิภาพและไม่มีคำตอบที่เกี่ยวข้องIcon Font เทียบกับ SVG แคชและความกังวลของเครือข่ายมุ่งเน้นไปที่การรับส่งข้อมูลเครือข่าย แต่สามารถแก้ไขได้อย่างง่ายดายโดยการเทมเพลต) หากเว็บไซต์ใหม่รองรับเฉพาะเบราว์เซอร์ที่ทันสมัยมีเหตุผลใดบ้างที่ไม่ใช้ SVG (หรือ - มีเหตุผลใดที่ใช้ PNG สำหรับไอคอน) หากเราไม่สนใจ IE8 …

94 html  svg  icons