Dit is een beetje esoterisch van iets, ik moest het gewoon een keer zelf doen en vond het verwarrend, dus ik dacht dat ik er een hele video over zou maken.
Het punt is, niet alles is in SVG. is fantastisch omdat het van alles kan zijn. Maar de syntaxis ervoor is net iets ingewikkelder dan alle andere vormen. Dus (misschien om die reden?) Illustrator voert de vormen altijd uit in SVG met het meest geschikte element. Rechthoeken zijn , andere vormen die alleen uit rechte lijnen bestaan , zijn a , of als het een open vorm is a , enz.
Dat zou prima zijn, behalve dat de DOM-methoden voor die vormen variëren. Een padelement heeft een methode genaamd getTotalLength()die u laat weten hoe lang het pad is. Dat is best gaaf en soms handig, maar je kunt het niet alleen op een , geen ander element doen.
Een reden waarom je die lengte misschien wilt weten, is omdat je van plan bent het te animeren zodat de vorm 'zichzelf tekent' - een cool klein ontwerpeffect (verzameling voorbeelden). Je kunt het in CSS doen, maar het is leuk om wat JavaScript te gebruiken om die CSS toe te passen, zodat het elke keer de perfecte afstand animeert.
Dus stel dat je dat tekeneffect wilt doen, maar de vorm is een dus het JavaScript mislukt. U kunt die polygoon in een pad veranderen, zonder het visueel te wijzigen, door er gewoon een punt aan toe te voegen met een bezierhandvat. Net als in, klik met het gereedschap Pen en sleep zodat de handvatten naar buiten komen en lijn de handvatten precies uit langs de lijn die er al is. Het bestaan van dat punt zal het een in output maken.
Als je dit veel doet, is er een tool genaamd Poly2Path die werkt, en dat overbodige punt niet nodig heeft.