बहुभुज को पथ डेटा में बदलें - सीएसएस-ट्रिक्स

मुझे हाल ही में ऐसा करने के लिए ऐसा करना पड़ा, इसलिए मैंने सोचा कि मैं इस पद्धति को बचाऊंगा। StackOverflow एक विधि है जो महान काम करता है:

().forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly)( var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,'path'); var points = poly.getAttribute('points').split(/\s+|,/); var x0=points.shift(), y0=points.shift(); var pathdata = 'M'+x0+','+y0+'L'+points.join(' '); if (poly.tagName=='polygon') pathdata+='z'; path.setAttribute('id',poly.getAttribute('id')); path.setAttribute('fill',poly.getAttribute('fill')); path.setAttribute('stroke',poly.getAttribute('stroke')); path.setAttribute('d',pathdata); poly.parentNode.replaceChild(path,poly); )

माइकल स्कोफ़िल्ड ने इसे त्वरित करने के लिए एक पेन बनाया:

कोड शो पर पेन स्कूप एसवीजी पॉलीगॉन को माइकल शोफिल्ड (@michaelschofield) द्वारा पथ पर देखें।

आप अपने स्वयं के बहुभुज को एसवीजी के ऊपर रख देते हैं और फिर इसे डोम में एक पथ द्वारा प्रतिस्थापित किया जाता है। आप पथ डेटा से बाहर निकलने के लिए निरीक्षण कर सकते हैं।

उदाहरण के लिए, उदाहरण के लिए, आप सीधी रेखाओं के साथ आकृति से चेतन करने की कोशिश कर रहे हैं। एसवीजी सॉफ्टवेयर टूल पूर्व को बहुभुज के रूप में आउटपुट करेगा, जो एक अलग प्रकार का डेटा है जो पथ सिंटैक्स के लिए मूल रूप से चेतन नहीं कर सकता है।