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

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ผมทำงานเกี่ยวกับอินเตอร์เฟซแบบโต้ตอบโดยใช้ SVG และ JavaScript / jQuery และฉันพยายามที่จะตัดสินใจระหว่างราฟาเอลและjQuery SVG ฉันอยากรู้ การแลกเปลี่ยนระหว่างกันเป็นอย่างไร จุดที่การพัฒนาดูเหมือนจะเป็น ฉันไม่ต้องการการสนับสนุน VML / IE ใน Raphael หรือความสามารถในการพล็อตของ jQuery SVG ฉันสนใจหลักในวิธีที่สง่างามที่สุดในการสร้างเคลื่อนไหวและจัดการแต่ละรายการบนผืนผ้าใบ SVG

254 javascript  jquery  svg  raphael 

ฉันมี SVG ที่ฉันพยายามจัดให้อยู่ในกอง div มีความกว้างหรือ 900px SVG มีความกว้าง 400px SVG มีการตั้งค่าระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ ใช้งานไม่ได้มันแค่ทำหน้าที่ราวกับว่าระยะขอบด้านซ้ายเป็น 0 (ค่าเริ่มต้น) ใครทราบข้อผิดพลาดของฉัน

254 css  layout  svg  positioning  margin 

ฉันต้องการวางภาพ SVG บางส่วนก่อนองค์ประกอบที่เลือกบางอย่าง ฉันใช้ jQuery แต่นั่นไม่เกี่ยวข้อง ฉันต้องการให้:beforeองค์ประกอบเป็นดังนี้: #mydiv:before { content: '<svg.. code here</svg>'; display: block; width: 22px; height: 10px; margin: 10px 5px 0 10px; } ถ้าฉันทำตามที่แสดงด้านบนมันก็แค่แสดงสตริง ฉันตรวจสอบรายละเอียดและดูเหมือนว่ามีข้อ จำกัด บางประการเกี่ยวกับเนื้อหาที่สามารถเป็นได้ มีการแก้ไขข้อ จำกัด นี้หรือไม่? css เนื้อหาเท่านั้นที่เกี่ยวข้องกับคำถามของฉัน

246 css  svg 

ฉันต้องการให้สเกลเนื้อหาขององค์ประกอบแบบอินไลน์ svg เมื่อขนาดไม่ใช่ภาษาท้องถิ่น แน่นอนว่าฉันสามารถแยกเป็นไฟล์และปรับให้เป็นแบบนั้นได้ index.html: <img src="foo.svg" style="width: 100%;" /> foo.svg: <svg width="123" height="456"></svg> อย่างไรก็ตามฉันต้องการเพิ่มสไตล์เพิ่มเติมให้กับ SVG ผ่าน CSS ดังนั้นการลิงก์ภายนอกจะไม่ใช่ตัวเลือก ฉันจะสร้างสเกล SVG แบบอินไลน์ได้อย่างไร

235 css  html  svg  scaling 

ฉันจะสร้างรูปร่างเช่นนี้เพื่อแสดงบนหน้าเว็บได้อย่างไร ฉันไม่ต้องการใช้ภาพเพราะพวกเขาจะพร่ามัวเมื่อปรับขนาด ฉันลองใช้CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ที่กลายเป็นเมาจริงๆ จากนั้นฉันก็ลองใช้ SVG: <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มันมีรูปร่าง แต่ส่วนล่างไม่โค้ง มีวิธีสร้างรูปร่างนี้เพื่อให้สามารถใช้ในหน้า HTML ได้หรือไม่

222 html  css  svg  css-shapes 

ขณะนี้กำลังสร้างแอปพลิเคชัน SVG บนเบราว์เซอร์ ภายในแอพนี้ผู้ใช้สามารถกำหนดรูปแบบและกำหนดตำแหน่งรูปร่างต่าง ๆ รวมถึงรูปสี่เหลี่ยมผืนผ้า เมื่อฉันนำ a ไปใช้stroke-widthกับrectองค์ประกอบการพูดของSVG 1pxจังหวะจะถูกนำไปใช้กับrectออฟเซ็ตและสิ่งที่ใส่เข้าไปในเบราว์เซอร์ต่างๆ นี่เป็นการพิสูจน์ว่าลำบากโดยเฉพาะอย่างยิ่งเมื่อฉันพยายามคำนวณความกว้างด้านนอกและตำแหน่งที่มองเห็นของรูปสี่เหลี่ยมผืนผ้าและจัดวางตำแหน่งถัดจากองค์ประกอบอื่น ๆ ตัวอย่างเช่น: Firefox เพิ่ม 1px inset (ล่างและซ้าย) และ 1px offset (บนและขวา) Chrome เพิ่มสิ่งที่ใส่ 1px (บนและซ้าย) และ 1px ชดเชย (ด้านล่างและขวา) ทางออกเดียวของฉันคือการวาดเส้นขอบที่แท้จริงด้วยตนเอง (อาจใช้pathเครื่องมือ) และวางตำแหน่งเส้นขอบด้านหลังองค์ประกอบที่ลูบ แต่วิธีนี้เป็นวิธีแก้ปัญหาที่ไม่พึงประสงค์และฉันไม่ต้องการลงไปที่ถนนเส้นนี้ถ้าเป็นไปได้ ดังนั้นคำถามของฉันคือคุณสามารถควบคุมวิธีการstroke-widthวาดSVG บนองค์ประกอบได้หรือไม่

204 svg  offset  rect 

ประมาณครึ่งหนึ่งของตัวอย่าง svg ที่ฉันเห็นบนอินเทอร์เน็ตรหัสนั้นถูกห่อด้วย<svg></svg>แท็กธรรมดา ๆ ในอีกครึ่งหนึ่งแท็ก svg มีคุณสมบัติที่ซับซ้อนมากมายเช่นนี้: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> คำถามของฉันคือ: มันจะใช้แท็ก svg ง่ายหรือไม่ ฉันได้ลองเล่นกับสิ่งที่ซับซ้อนและทุกอย่างก็ทำงานได้ดีในตอนท้ายถ้าไม่รวม

203 xml  svg  tags 

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

203 svg  position  grouping 

ฉันมีรหัสต่อไปนี้: <span> <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> <desc></desc> <defs/> <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> </svg>  </span> เป็นไปได้หรือไม่ที่จะเปลี่ยนสีเติมของเส้นทาง SVG ด้วย CSS หรือวิธีการอื่นโดยไม่เปลี่ยนแปลงในแท็กพา ธ

202 css  svg 

ฉันมีรหัส JavaScript ซึ่งสร้าง (โดยใช้ D3.js) svgองค์ประกอบที่มีแผนภูมิ ฉันต้องการอัปเดตแผนภูมิตามข้อมูลใหม่ที่มาจากบริการบนเว็บโดยใช้ AJAX ปัญหาคือทุกครั้งที่ฉันคลิกที่ปุ่มอัปเดตจะสร้างใหม่svgดังนั้นฉันจึงต้องการลบเก่าหรืออัปเดตเนื้อหา นี่คือตัวอย่างจากฟังก์ชั่น JavaScript ที่ฉันสร้างsvg: var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); ฉันจะลบsvgองค์ประกอบเก่าหรืออย่างน้อยแทนที่เนื้อหาได้อย่างไร

200 javascript  ajax  svg  d3.js 

สมมติว่าสิ่งนี้: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'); }); </script> </head> <body> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> </svg> </body> ทำไมฉันไม่เห็นอะไรเลย

199 jquery  html  svg 

เมื่อพิจารณาจากวงกลมที่มีศูนย์กลางที่ (200,200) รัศมี 25 ฉันจะวาดส่วนโค้งจาก 270 องศาถึง 135 องศาได้อย่างไรและวงกลมหนึ่งจาก 270 ถึง 45 องศา 0 องศาหมายถึงมันอยู่บนแกน x (ด้านขวา) (หมายถึงตำแหน่งนาฬิกา 3 o ') 270 องศาหมายความว่ามันเป็นตำแหน่ง 12 นาฬิกาและ 90 หมายถึงตำแหน่งนาฬิกา 6 โมง โดยทั่วไปเส้นทางสำหรับอาร์คสำหรับส่วนหนึ่งของวงกลมด้วยคืออะไร x, y, r, d1, d2, direction ความหมาย center (x,y), radius r, degree_start, degree_end, direction

191 svg 

ผมต้องการที่จะแสดงบางข้อความภายในrect SVG เป็นไปได้ไหม? ฉันเหนื่อย <svg xmlns="http://www.w3.org/2000/svg"> <g> <rect x="0" y="0" width="100" height="100" fill="red"> <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text> </rect> </g> </svg> แต่มันไม่ทำงาน

180 text  svg  rect 

ฉันมีสี่เหลี่ยมผืนผ้าต่อไปนี้ ... <rect x="0px" y="0px" width="60px" height="20px"/> ฉันต้องการที่จะจัดกึ่งกลางคำว่า "นิยาย" ไว้ข้างใน สำหรับรูปสี่เหลี่ยมผืนผ้าอื่น ๆ svg word จะห่อหุ้มอยู่ภายในหรือไม่? ฉันไม่สามารถค้นหาสิ่งใดเป็นพิเศษเกี่ยวกับการแทรกข้อความภายในรูปร่างที่อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งและการตัดคำ นอกจากนี้ข้อความไม่สามารถออกจากสี่เหลี่ยมผืนผ้าได้ การดูตัวอย่างhttp://www.w3.org/TR/SVG/text.html#TextElementนั้นไม่ได้ช่วยเนื่องจากองค์ประกอบข้อความของ x และ y แตกต่างจาก x และ y ของสี่เหลี่ยมผืนผ้า ดูเหมือนจะไม่มีความกว้างและความสูงสำหรับองค์ประกอบข้อความ ฉันไม่แน่ใจคณิตศาสตร์ที่นี่ (ตาราง html ของฉันจะไม่ทำงาน)

179 text  svg 

ฉันรู้ว่าภาพสามารถวางใน MD ที่มีไวยากรณ์ MD อย่างใดอย่างหนึ่งหรือแต่ฉันมีปัญหาในการวาง SVG ใน MD ที่รหัสโฮสต์บน GitHub ในที่สุดการใช้ rails3 และการเปลี่ยนรูปแบบบ่อยครั้งในตอนนี้ดังนั้นฉันใช้RailRoadyเพื่อสร้าง SVG ของ schema diagram ของโมเดล ฉันต้องการให้ SVG นั้นถูกวางไว้ใน ReadMe.md และแสดง เมื่อฉันเปิดไฟล์ SVG ในเครื่องมันจะทำงานได้ดังนั้นฉันจะให้เบราว์เซอร์แสดง SVG ในไฟล์ MD ได้อย่างไร ระบุว่ารหัสจะเป็นแบบไดนามิกจนกว่าจะได้รับการสรุป (ดูเหมือนจะไม่มีเลย) โฮสติ้ง SVG ในที่ต่าง ๆ ดูเหมือนจะเกินความจริงและฉันก็ขาดวิธีการในการทำสิ่งนี้ให้สำเร็จ SVG ที่ฉันพยายามรวมอยู่ที่นี่ใน GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg ฉันได้ลองทำสิ่งต่อไปนี้แล้วโดยใช้รูปภาพจริงเช่นกันเพื่อตรวจสอบว่าไวยากรณ์ทำงานได้หรือไม่เพียงแสดงรหัส SVG: ![Overview][1] [1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg "Overview" …

173 svg  github  markdown