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

ฉันต้องการรับข้อมูลเส้นทาง SVG จากFont Awesomeร่ายมนตร์เพื่อให้สามารถใช้เป็น SVG ใน HTML ได้โดยตรง ฉันคิดว่ามันจะง่ายพอ ๆ กับการคัดลอกข้อมูลเส้นทางจากfontawesome-webfont.svgแต่เมื่อฉันใช้มันใน HTML ของฉันสัญลักษณ์ทั้งหมดจะแสดงผลแบบกลับหัว ใครทราบสาเหตุ? (ดู ซอ ) Font Awesome SVG: <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 …

93 html  svg  font-awesome 

นี่คือภาพประกอบของปัญหา (ทดสอบใน Firefox และ Chrome): <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ดูบน JSFiddle ขอให้สังเกตเพิ่มredพื้นที่ภายในด้านล่างสีฟ้าdivsvg ลองตั้งค่าpaddingและmarginองค์ประกอบทั้งสองเป็น0แล้ว แต่ไม่มีโชค

93 html  css  svg 

SVG และ HTML5 Canvas แตกต่างกันอย่างไร ดูเหมือนทั้งคู่จะทำแบบเดียวกันกับฉัน โดยพื้นฐานแล้วพวกเขาทั้งคู่วาดภาพเวกเตอร์โดยใช้จุดพิกัด ฉันขาดอะไรไป? อะไรคือความแตกต่างที่สำคัญระหว่าง SVG และ HTML5 Canvas เหตุใดฉันจึงควรเลือกอย่างใดอย่างหนึ่ง

92 html  canvas  svg 

Наэтотвопросестьответына Stack Overflow нарусском : Прозрачныйтекствырезанизфона มีวิธีใดบ้างในการตัดข้อความโปร่งใสออกจากเอฟเฟกต์พื้นหลังเช่นเดียวกับในภาพต่อไปนี้ด้วย CSS คงเป็นเรื่องน่าเศร้าที่ต้องสูญเสีย SEO อันมีค่าทั้งหมดไปเพราะรูปภาพแทนที่ข้อความ ตอนแรกฉันนึกถึงเงา แต่คิดอะไรไม่ออก ... รูปภาพเป็นพื้นหลังของไซต์ซึ่งเป็น<img>แท็กที่อยู่ในตำแหน่งที่แน่นอน

92 css  svg  fonts  css-shapes 

ฉันมีชุดสี่เหลี่ยม svg (โดยใช้ D3.js) และฉันต้องการแสดงข้อความเมื่อวางเมาส์เหนือข้อความควรล้อมรอบด้วยกล่องที่ทำหน้าที่เป็นพื้นหลัง ทั้งสองควรจัดวางให้ชิดกันอย่างสมบูรณ์และเป็นรูปสี่เหลี่ยมผืนผ้า (ด้านบนและตรงกลาง) วิธีที่ดีที่สุดในการทำคืออะไร? ฉันลองเพิ่มข้อความ svg โดยใช้แอตทริบิวต์ "x", "y", "width" และ "height" จากนั้นป้อน svg rect ไว้ล่วงหน้า ปัญหาคือจุดอ้างอิงของข้อความอยู่ตรงกลาง (เนื่องจากฉันต้องการจัดแนวกึ่งกลางที่ฉันใช้text-anchor: middle) แต่สำหรับสี่เหลี่ยมผืนผ้านั้นเป็นพิกัดด้านซ้ายบนและฉันต้องการระยะขอบเล็กน้อยรอบ ๆ ข้อความซึ่งทำให้เป็นแบบ ความเจ็บปวด. อีกทางเลือกหนึ่งคือการใช้ html div ซึ่งน่าจะดีเพราะฉันสามารถเพิ่มข้อความและช่องว่างภายในได้โดยตรง แต่ฉันไม่รู้วิธีรับพิกัดสัมบูรณ์สำหรับแต่ละสี่เหลี่ยมผืนผ้า มีวิธีทำไหม?

92 javascript  svg  d3.js  tooltip 

ฉันสามารถใช้ image.svg ที่แปลงแล้วเป็นไอคอนแผนที่ของ Google ได้ไหม ฉันกำลังแปลงรูปภาพ png ของฉันเป็น svg และฉันต้องการใช้สิ่งนี้เช่นสัญลักษณ์แผนที่ google ที่สามารถหมุนได้ ฉันพยายามใช้สัญลักษณ์แผนที่ google แล้ว แต่ฉันต้องการมีไอคอนเช่นรถยนต์ผู้ชายและอื่น ๆ นั่นเป็นเหตุผลที่ฉันแปลงไฟล์ png ของฉันเป็น svg เช่นเดียวกับไซต์ตัวอย่างนี้เขาใช้อะไรกับhttp: / /www.goprotravelling.com/

92 google-maps  google-maps-api-3  svg 

ใน HTML5 องค์ประกอบสามารถมีข้อมูลเมตาที่กำหนดเองเก็บไว้ในแอตทริบิวต์ XML ที่มีชื่อขึ้นต้นด้วยdata-เช่น<p data-myid="123456">. นี่เป็นส่วนหนึ่งของสเป็ค SVG ด้วยหรือเปล่า? ในทางปฏิบัติเทคนิคนี้ใช้ได้ดีกับเอกสาร SVG ในหลาย ๆ ที่ แต่ฉันต้องการทราบว่าเป็นส่วนหนึ่งของข้อกำหนด SVG อย่างเป็นทางการหรือไม่เนื่องจากรูปแบบยังเล็กพอที่จะยังมีความเข้ากันไม่ได้ระหว่างเบราว์เซอร์โดยเฉพาะในอุปกรณ์เคลื่อนที่ ดังนั้นก่อนที่จะยอมรับรหัสฉันต้องการทราบว่าฉันสามารถคาดหวังว่าเบราว์เซอร์ในอนาคตจะรวมกันเพื่อรองรับสิ่งนี้หรือไม่ ฉันพบข้อความนี้จากรายชื่ออีเมลของคณะทำงานโดยระบุว่า "คาดหวังว่า [พวกเขา] จะ" จะสนับสนุน สิ่งนี้กลายเป็นทางการหรือไม่?

87 svg  web-standards 

สมมติว่าฉันมีรูปร่างประกอบสองสามแบบ ( <g>) ฉันต้องการที่จะสามารถคลิกและลากพวกเขาได้ แต่ฉันต้องการให้สิ่งที่ฉันกำลังลากอยู่ในขณะนี้ให้อยู่บนสุดของอีกอันในลำดับ Z ดังนั้นถ้าฉันลากมันไปทับอันอื่น หนึ่งควรถูกบดบัง

86 javascript  svg 

วิธีที่เหมาะสมในการรับขนาดของsvgองค์ประกอบคืออะไร? http://jsfiddle.net/langdonx/Xkv3X/ Chrome 28: style x client 300x100 offset 300x100 IE 10: stylex client300x100 offsetundefinedxundefined FireFox 23: "style" "x" "client" "0x0" "offset" "undefinedxundefined" มีคุณสมบัติความกว้างและความสูงอยู่svg1แต่.width.baseVal.valueจะตั้งค่าได้ก็ต่อเมื่อฉันตั้งค่าแอตทริบิวต์ความกว้างและความสูงบนองค์ประกอบ ซอมีลักษณะดังนี้: HTML <svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" /> <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /> <circle cx="250" cy="50" r="40" …

86 javascript  svg 

ฉันมีตาราง html และฉันต้องการวาดลูกศรจากเซลล์หนึ่งไปยังอีกเซลล์หนึ่ง ตัวอย่างเช่นนี้: สิ่งนี้จะเกิดขึ้นได้อย่างไร? ตัวอย่าง HTML: <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> </body> </html> หากคุณปรับขนาดเบราว์เซอร์ลูกศรควรอยู่ในตำแหน่งเริ่มต้น / สิ้นสุด (ใหม่)

13 javascript  html  svg 

ฉันต้องการที่จะแสดง VectorDrawable ในหน้าจอของฉัน <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white" android:gravity="fill" /> <item android:drawable="@drawable/splash_screen" android:gravity="bottom|center" /> </layer-list> SVG ของฉันมีandroid:width="320dp"และandroid:height="238dp" <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="320dp" android:height="238dp" android:viewportWidth="320" android:viewportHeight="238"> <group> <clip-path android:pathData="M0,0h320v238h-320z M 0,0"/> <path android:pathData="M0,143.311a160,4.476 0,1 0,320 0a160,4.476 0,1 0,-320 0z" android:fillColor="#E6E6E6"/> <path android:pathData="M245.269,94.815C245.067,94.818 244.865,94.821 244.66,94.821C244.455,94.821 244.253,94.818 244.051,94.815C233.341,94.572 225.578,87.88 227.554,80.859L232.372,63.73L233.59,59.396L255.177,59.764L256.488,64.004L261.653,80.693C263.839,87.753 256.076,94.572 245.269,94.815Z" android:fillColor="#3F3D56"/> …

11 android  svg  splash-screen  android-vectordrawable 

ฉันสร้างแอนิเมชั่นแผนที่ขุมทรัพย์ก่อนอื่นมันจะแสดงเส้นทางเป็นสีเทาอ่อน แต่เมื่อภาพเคลื่อนไหวเริ่มขึ้นฉันต้องการให้ขีดสีเทาอ่อนหายไปหรือเปลี่ยนเป็นสีดำเหมือนภาพเคลื่อนไหวเติม ".road" เตะฉันเข้า การดิ้นรนเพื่อให้ได้เส้นประสีเทาอ่อน ". ขั้นตอน" จะหายไปเมื่อภาพเคลื่อนไหวเติมข้ามตำแหน่งนั้น svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .road { stroke-dasharray: 744; stroke-dashoffset: -744; animation: draw-road 10s infinite; } .steps { stroke-dasharray: -744; stroke-dashoffset: 744; animation: draw-steps 10s reverse; } @keyframes draw-road { 0% { …

9 css  svg