सीएसएस या कैनवास के साथ घुमावदार रेखाएं खींचे

Question

मुझे उड़ान अवधि दिखाने के लिए गतिशील घुमावदार रेखाएं खींचने की आवश्यकता है।

कोई विचार यह है कि मैं इसे कैसे कर सकता हूं?

मुझे स्वच्छ सीएसएस के साथ प्रयास किया गया था लेकिन कुछ प्रतिपादन समस्याएं हैं, मुझे लगता है कि केवल कैनवास का उपयोग करना है।

Answer 1

आप SVG इस्तेमाल कर सकते हैं ताकि उसे कुछ अतिरिक्त ब्राउज़र नास्तिक मुझे लगता है।

SVG Browser Support

अपने HTML में

Canvas Browser Support

कुछ इस तरह:

<?xml version="1.0" standalone="no"?> 
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> 
</svg> 

बेशक इस Javascript के माध्यम से उत्पन्न किया जा सकता है और फिर गाया। JSFiddle

SVG Tutorial

गतिशील जे एस पीढ़ी में एक संक्षिप्त परिचय इन पंक्तियों के साथ कुछ होगा। :

अपने डोम तत्व बनाएं:

var svgNS = "http://www.w3.org/2000/svg"; 
var flightPath = document.createElementNS(svgNS,"path"); 

flightPath.setAttributeNS(null,"id","path_1"); 
//This is what you need to generate based on your variables 
flightPath.setAttributeNS(null,"d","M10 80 Q 95 10 180 80"); 
//Now we add our flight path to the view. 
document.getElementById("flight").appendChild(flightPath); 

कुछ सीएसएस एनीमेशन जोड़े यह एक छोटे बनाने के लिए:

<svg id="flight" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
</svg> 

अब हम कुछ जे एस जिम्मेदार बताते हैं कि आप उड़ान की जानकारी में चर के आधार पर जेनरेट होगा जोड़ने खूबसूरत और आपको निम्न उदाहरण के साथ अंत:

JSFiddle Dynamic