สิ่งตีพิมพ์ในหัวข้อ 'svg'
รู้เบื้องต้นเกี่ยวกับ D3 Force สำหรับการจำลองและแอนิเมชั่น
ไลบรารี D3 เหมาะอย่างยิ่งสำหรับการสร้างการแสดงภาพข้อมูลที่ครบถ้วนและโต้ตอบได้ซึ่งทำงานในเบราว์เซอร์ของคุณ D3 เป็นไลบรารี JavaScript ที่ให้การเชื่อมโยงที่ง่ายดายระหว่างพลังของ SVG (Scalable Vector Graphics) ในเบราว์เซอร์และแอปพลิเคชัน JavaScript ของคุณ (และของฉัน) เอง ไม่ว่าคุณจะใช้ React, Angular, Vue หรือเว็บเฟรมเวิร์กหรือโปรแกรมอื่นๆ ในเทคโนโลยี W3C ทั่วไป D3 ก็มอบ API ที่ใช้งานง่ายเพื่อจัดการอ็อบเจ็กต์ SVG และทำให้วัตถุเป็นแบบโต้ตอบและเคลื่อนไหวได้ ขั้นตอนง่ายๆ ในการเริ่มใช้งาน SVG และ..
ไลบรารี JavaScript 5 อันดับแรกสำหรับภาพเคลื่อนไหว SVG
ไลบรารี JavaScript ที่แนะนำสำหรับภาพเคลื่อนไหว SVG
ปัจจุบัน SVG ถูกนำมาใช้กันอย่างแพร่หลายในเว็บแอปพลิเคชัน ความสามารถในการขยายขนาดโดยไม่สูญเสียคุณภาพคือเหตุผลหลักที่อยู่เบื้องหลังความสำเร็จ
แต่คุณรู้หรือไม่ว่าเราสามารถใช้ SVG นอกเหนือจากการใช้ภาพนิ่งได้
ในบทความนี้ ฉันจะแนะนำไลบรารี JavaScript 5 ไลบรารีที่เราสามารถใช้เพื่อทำให้ SVG เคลื่อนไหวได้
1. BonsaiJS — API กราฟิกที่ใช้งานง่าย
ไลบรารีกราฟิกน้ำหนักเบาพร้อม API กราฟิกที่ใช้งานง่ายและตัวเรนเดอร์ SVG
BonsaiJS..
การปรับแต่งขั้นสูงของ SVG
สำรวจ SVG ตอนที่ 2
การปรับแต่งขั้นสูงของ SVG
การจัดกลุ่ม คำจำกัดความ การไล่ระดับสี
สวัสดีเพื่อนๆ จากบทความก่อนหน้านี้ของฉัน เราได้เห็นวิธีสร้างรูปทรงพื้นฐานโดยใช้ SVG แล้ว การขยายรูปทรงพื้นฐานเหล่านี้จะทำให้สามารถสร้างความคิดสร้างสรรค์ SVG ของคุณเองได้ ในบทความนี้ เราจะมาพูดคุยถึงวิธีทำให้ความคิดสร้างสรรค์ SVG ชาญฉลาดและง่ายดายด้วยความช่วยเหลือจากการจัดกลุ่มและคำจำกัดความ
ด้วยความช่วยเหลือของการจัดกลุ่มและคำจำกัดความ ทำให้สามารถจัดกลุ่มชุดองค์ประกอบ SVG ได้..
คำถามในหัวข้อ 'svg'
ปรับขนาด SVG (Raphael.js) เหมือน SWF
ฉันเริ่มใช้ Raphael.js เมื่อไม่กี่วันก่อน และฉันก็สนุกกับมันมาก สิ่งเดียวที่ฉันไม่สามารถเข้าใจได้คือวิธีรับแท็ก "กระดาษ" หรือ svg/vml เพื่อเติมเต็มหน้าต่างเบราว์เซอร์เช่น swf ดูตัวอย่างนี้...
12935 มุมมอง
schedule
16.01.2024
การเติมไล่ระดับสี SVG ไม่ทำงาน
ฉันกำลังพยายามเพิ่มพื้นหลังแบบไล่ระดับสีให้กับเส้นทาง SVG ทางเดินกลับเป็นสีดำแทน นี่คือรหัสที่ฉันได้รับ:
<svg style="overflow: hidden; position: relative; " height="150" version="1.1" width="290" xmlns="http://www.w3.org/2000/svg">
......
898 มุมมอง
schedule
27.10.2023
raphael js ปรับขนาด canvas จากนั้น setViewBox เพื่อแสดงองค์ประกอบทั้งหมด
ฉันมีปัญหากับผ้าใบของฉัน
ผืนผ้าใบของฉันในความกว้างแรก = 1300 สูง = 500
จากนั้นฉันปรับขนาดเป็น width = 800px, height = 500
ฉันลอง setViewBox เพื่อซูม แต่เมาส์ไม่ได้รับการแก้ไขด้วยองค์ประกอบเมื่อฉันลากมัน
@canvas.resize(800, 500)...
2015 มุมมอง
schedule
07.12.2023
การใช้ไฟล์ SVG เช่นไฟล์ PNG ใน Windows Phone
ฉันค้นหาคำตอบใน Google แล้ว แต่ก็ไม่ได้มีประโยชน์อะไรสำหรับฉัน เป็นไปได้ไหมที่จะใช้ไฟล์ svg เช่น png (jpeg หรือรูปแบบกราฟิกแรสเตอร์อื่น ๆ ) ในการควบคุมรูปภาพใน Windows Phone 8 ด้วยผลลัพธ์คล้ายกับรหัสต่อไปนี้ (ไม่ทำงาน):
<Image...
4491 มุมมอง
schedule
29.12.2023
มีปัญหากับ Real Device โดยใช้ภาพเวกเตอร์ใน Android SVG-android
ฉันใช้ svg-android.jar จาก https://github.com/pents90/svg-android ทำงานได้ดี แต่ใช้กับอุปกรณ์จำลองใน eclipse เท่านั้น อ๊ากกก บนอุปกรณ์จริงมันจะว่างเปล่า imageView บนหน้าจอ นี่คือรหัสของฉัน:
SVG svg =...
21070 มุมมอง
schedule
23.10.2023
เส้นทาง SVG ไม่แสดง
ฉันกำลังพยายามแสดง SVG ของเทศมณฑลของอลาบามาที่นำมาจาก Wikipedia . ด้วยเหตุผลบางอย่างไม่แสดงเส้นทางที่แยกออกจากมณฑล มีเพียงสีแดงสำหรับเขต Autauga ฉันใช้รหัสต่อไปนี้เพื่อแสดง SVG ฉันได้ลองตั้งค่า stroke="black" stroke-width="5px" fill="yellow"...
982 มุมมอง
schedule
19.01.2024
เครื่องหมายจุลภาคในคำอธิบายเส้นทาง SVG
เมื่ออธิบายเส้นทางใน SVG ตัวอย่างออนไลน์มักจะแยกค่าด้วยเครื่องหมายจุลภาค ในขณะที่ตัวอย่างอื่นๆ ไม่แยกกัน
บทช่วยสอนเส้นทาง จาก Mozilla Developer Network SVG Tutorial ใช้ สัญกรณ์ทั้งสองเพื่ออธิบายส่วนโค้ง:
A 30 50 0 0 1 162.55 162.45
และ...
3949 มุมมอง
schedule
17.01.2024
XAML SVG เปลี่ยนสีเมื่อรันไทม์
เรามีชุด SVG ที่จัดเก็บไว้ในพจนานุกรมทรัพยากร
ตัวอย่าง:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DrawingImage x:Key="Bell">...
4846 มุมมอง
schedule
01.01.2024
วิธีใช้ SVG clipPath กับองค์ประกอบ HTML ที่ไม่ได้อยู่ที่มุมซ้ายบนของเอกสารในเบราว์เซอร์ webkit
ฉันได้กำหนด SVG clipPath และนำไปใช้กับ DIV บางส่วนบนเพจของฉัน มันทำงาน/แสดงผลตามที่คาดไว้ใน FF แต่ใน Chrome และ Safari (เวอร์ชันล่าสุดทั้งหมด) ดูเหมือนว่า clipPath จะมีผลกับองค์ประกอบ HTML เท่านั้นหากองค์ประกอบ HTML อยู่ในตำแหน่งมุมซ้ายบนของหน้า...
460 มุมมอง
schedule
31.10.2023
Fabricjs: โหลด svg จากโฟลเดอร์ในเครื่อง
ฉันต้องโหลด 1.svg จากโฟลเดอร์ในเครื่อง ในโค้ดต่อไปนี้ เมื่อฉันแทนที่ fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg" ด้วย fabric.loadSVGFromURL("1.svg" รูปภาพจะไม่แสดงในแคนวาสอีกต่อไป ผมทำอะไรผิดหรือเปล่า? รหัสที่ถูกต้องคืออะไร?...
1101 มุมมอง
schedule
18.01.2024
เส้นทาง SVG จะไม่แสดงเมื่อแทรกโดยใช้ Javascript
ฉันพยายามเล่นซอกับ Google Maps ฉันยกตัวอย่างที่ดีทางออนไลน์ซึ่งใช้การซ้อนทับแผนที่แทนเครื่องหมายเพื่อให้สามารถปรับแต่งเครื่องหมายได้มากขึ้น ฉันทำสิ่งนี้เพราะฉันต้องการทำให้เครื่องหมายเคลื่อนไหวจากเส้นทาง svg หนึ่งไปยังอีกเส้นทางหนึ่ง ปัญหา:...
207 มุมมอง
schedule
12.12.2023
ฉันจะปรับขนาดความสูง svg นี้โดยอัตโนมัติได้อย่างไร
ฉันมี svg ด้านล่าง
ฉันรวมมันไว้ในไฟล์ของฉันและพยายามปรับขนาดให้เป็น 100% ของความกว้างของโฟลเดอร์ ฉันต้องการตั้งค่าความสูงเป็นอัตโนมัติ ตอนนี้ก็มีความสูงที่ตั้งไว้แล้ว
.logo {
width: 43%;
margin: 0 auto;
display: block;...
269 มุมมอง
schedule
14.01.2024
แปลง SVG เป็น PNG ด้วยแบบอักษร base64 ที่ฝังไว้
ฉันมีแบ็กเอนด์ nodeJS พร้อมบริการแปลงไฟล์ SVG เป็น PNG ฉันเคยใช้ phantomJS ในการทำเช่นนั้น และไม่เคยมีปัญหาใดๆ เลย แต่ประสิทธิภาพการทำงานแย่มาก
ฉันกำลังมองหาวิธีการที่มีประสิทธิภาพในการทำเช่นนี้ ตอนนี้ฉันใช้ RSVG...
473 มุมมอง
schedule
23.11.2023
วิธีสร้างเอฟเฟกต์การวาดเส้น - การใช้ ScrollMagic & GSAP (GreenSock)
ฉันกำลังเริ่มโครงการเว็บเร็วๆ นี้ และมีองค์ประกอบของไซต์นี้: https://serioverify.com ที่ฉัน ลูกค้าต้องการมีบนเว็บไซต์ของพวกเขา
มันเป็นเอฟเฟกต์การวาดเส้นตามตำแหน่งการเลื่อน ฉันได้รวม GreenSock & ScrollMagic เข้ากับธีมที่กำหนดเองของฉันแล้ว -...
703 มุมมอง
schedule
28.12.2023
ไม่สามารถเพิ่มข้อความลงในแถบแนวนอน d3
ฉันใช้แผนภูมิแท่งแนวนอนต่อไปนี้ ( http://bl.ocks.org/juan-cb/ab9a30d0e2ace0d2dc8c ) ซึ่งจะอัปเดตตามการเลือกบางส่วน ฉันกำลังพยายามเพิ่มป้ายกำกับให้กับแท่งซึ่งจะแสดงค่าภายในแต่ละแท่ง ไม่แน่ใจว่าฉันผิดตรงไหน ในตอนแรกฉันมีองค์ประกอบ SVG rect...
499 มุมมอง
schedule
04.11.2023
วิธีทำให้การเติมเคลื่อนไหวแทนเส้นทางในแถบความคืบหน้า SVG
ฉันต้องการใช้ SVG ต่อไปนี้สำหรับหน้าการบริจาค ฉันต้องการเติมเต็มหัวใจทั้งหมด (ไม่ใช่แค่เส้นขอบ) และเติมเต็มจากล่างขึ้นบน ฉันจะเปลี่ยนทิศทางการบรรจุได้อย่างไร?
https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/
<div id="container">
<svg...
2394 มุมมอง
schedule
17.12.2023
เหตุใดการเปลี่ยนแปลงนี้จึงแสดงแตกต่างออกไปบน Chrome และ Firefox
ฉันมีภาพเคลื่อนไหว SVG ต่อไปนี้ (เป็นตัวอย่างข้อมูลที่ค่อนข้างใหญ่ โปรดดูที่ 'แสดงข้อมูลโค้ด'):
.logo > .logo-compass-frame {
fill: none;
stroke: black;
stroke-width: 15;
stroke-linecap: round;
stroke-miterlimit: 10;
}...
537 มุมมอง
schedule
26.10.2023
วิธีการตั้งค่าสตริง base64 svg เป็นแท็กรูปภาพ src
ฉันมีคำถาม. ในโค้ดด้านล่าง img.onload ไม่เริ่มทำงานเมื่อฉันตั้งค่า base64 เป็น src แต่เมื่อฉันตั้งค่ารูปภาพโดยตรงเป็น src img.onload จะถูกไล่ออก และ console.log ส่งคืน "image is Loaded" คุณช่วยอธิบายได้ไหมว่าอะไรเป็นสาเหตุที่ทำให้ img.onload...
3819 มุมมอง
schedule
01.11.2023
วิธีรักษาอัตราส่วนภาพของรูปภาพภายใน SVG โดยไม่มีอัตราส่วนภาพ
ฉันมี SVG ทำงานอย่างถูกต้องเป็นเส้นทางการตัดที่ปิดบังรูปภาพ รูปร่าง SVG มี PreservAspectRatio="none" และทำงานตามที่ฉันต้องการ (เต็มความกว้าง แต่ยังคงความสูงคงที่)
ปัญหาคือรูปภาพที่ฉันกำลังตัดนั้นยืดและบิดเบี้ยวไปพร้อมกับ SVG...
394 มุมมอง
schedule
29.10.2023
ภาพเคลื่อนไหว SVG stroke-dashoffset เริ่มต้น (อีกครั้ง) เมื่อคลิก
ฉันสร้างแอนิเมชั่น svg- stroke-animation ง่ายๆ โดยใช้ css และ jquery ภาพเคลื่อนไหวเริ่มต้นเมื่อคลิก แต่ฉันไม่พบวิธี เริ่มต้นใหม่อีกครั้งด้วยการคลิกครั้งที่สอง (หรือครั้งที่สาม ฯลฯ) ฉันคิดว่าวิธีแก้ปัญหานั้นค่อนข้างง่าย แต่ก็ยังไม่มีอะไรทำงาน...
816 มุมมอง
schedule
16.11.2023
