Претвори полигон у податке о путањи - ЦСС-трикови

То сам морао да урадим неколико пута недавно, па сам мислио да сачувам методу. СтацкОверфлов има метод који одлично функционише:

().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); )

Мицхаел Сцхофиелд је направио оловку да то учини брзо:

Погледајте Пен Цонверт СВГ Полигон то Патх, Мицхаел Сцхофиелд (@мицхаелсцхофиелд) на ЦодеПен-у.

Ставите свој сопствени Полигон у СВГ изнад, а затим га замењује путања у ДОМ-у. ДевТоолс можете прегледати да бисте добили податке о путањи.

Сврха је, на пример, да покушавате да анимирате облик из равних линија у облик са закривљеним линијама. СВГ софтверски алати ће их приказати као полигон, што је друга врста података који не могу изворно анимирати синтаксу путање.