銆怱VG銆慡VG鐨勮嚧鍛芥鍣ㄢ€斺€旇矾寰勫崥瀹㈣鏄庢枃涓墍娑夊強鐨勪俊鎭潵鑷綉缁滄暣鐞嗗強涓汉鎬荤粨锛屾剰鍦ㄤ綔涓轰釜浜哄涔犲拰缁忛獙鐨勬€荤粨.濡傛湁鍦版柟渚垫潈锛岃鑱旂郴鎴戝垹闄わ紝璋㈣阿锛佽鏄庝竴涓嬶紝鏄ㄥぉ涓€鍑猴紝绐佺劧鐪嬪埌鏈夋湅鍙嬬暀瑷€锛屽笇鏈涜兘鐪嬪埌鏇村鐨凷VG鏂囩珷銆傜獊鐒舵湁鐐规劅鍔煒傦紝鎵€浠ョ户缁€傦紙绉诲姩鐐规瘮杈冧綆锛夎矾寰勫厓绱犵殑鑳藉姏璺緞鍏冪礌鏄疭VG鍩烘湰褰㈢姸涓渶寮哄ぇ鐨勩€傚畠涓嶄粎鍙互鍒涘缓鍏朵粬鍩烘湰褰㈢姸锛岃繕鍙互鍒涘缓鏇村鍏朵粬褰㈢姸銆傛瘮濡傜煩褰紙鐩磋鐭╁舰鎴栬€呭渾瑙掔煩褰級銆佸渾褰€佹き鍦嗐€佹姌绾裤€佸杈瑰舰绛夈€傛洿閲嶈鐨勬槸鍙互缁樺埗涓€浜涙洸绾匡紝姣斿璐濆灏旀洸绾裤€佷簩娆℃洸绾跨瓑銆傝矾寰勫厓绱犵殑褰㈢姸鐢卞睘鎬瀹氫箟锛宒灞炴€ч€氳繃鈥滃懡浠ゅ拰鍧愭爣鈥濆簭鍒楁帶鍒舵暣涓矾寰勩€侻=movetoL=linetoH=horizo鈥嬧€媙tallinetoV=verticallinetoC=curvetoS=smoothcurvetoQ=quadraticB茅ziercurveT=smoothquadraticB茅ziercurvetoA=ellipticalArcZ=closepath鐒跺悗涓€涓€浠嬬粛銆備富瑕佸垎涓虹洿绾挎寚浠ゅ拰鏇茬嚎鎸囦护銆傜洿绾挎寚浠や富瑕佹湁浠ヤ笅鍑犵绫诲瀷锛歁(moveto)锛氶渶瑕佷袱涓弬鏁?x杞村拰y杞村潗鏍囷紝绉诲姩鐐圭殑x杞村拰y杞村潗鏍?L(lineto)锛氶渶瑕佷袱涓弬鏁?x杞村拰y杞村潗鏍囷級锛屽畠浼氬湪褰撳墠浣嶇疆鍜屾渶鏂颁綅缃紙绗斿湪L涔嬪墠鐨勭偣锛変箣闂寸粯鍒朵竴鏉＄嚎娈点€侶(horizo鈥嬧€媙tallineto)锛氳〃绀簒杞寸Щ鍔ㄤ綅缃殑鍙傛暟锛岀粯鍒舵按骞崇嚎V(verticallineto)锛氳〃绀簓杞寸Щ鍔ㄤ綅缃殑鍙傛暟锛岀粯鍒跺瀭鐩寸嚎Z(closepath)锛氱粯鍒朵粠褰撳墠鐐瑰紑濮嬬殑鐩寸嚎绀轰緥鍒拌矾寰勮捣鐐圭殑鐩寸嚎锛氱敾涓€涓鏂瑰舰鏁堟灉锛氫唬鐮佸垎鏋愶細棣栧厛瀹氫箟涓€涓?00x100鐨勭敾甯冿紙鍧愭爣绯伙級锛岃捣鐐瑰垱寤哄湪(10,10)鐢∕鎸囦护锛岀敤H鎸囦护绉诲姩鍒皒杞存按骞虫柟鍚?0鐨勪綅缃紝y杞翠笉鍙橈紝鍗崇Щ鍔ㄥ埌(90,10)锛岀劧鍚庨€氳繃V鎸囦护绉诲姩鍒皔杞翠负90鐨勪綅缃紝x杞翠笉鍙橈紝鍗冲潗鏍囦负(90,90)锛屽啀鐢℉鎸囦护绉诲姩鍒皒杞存按骞虫柟鍚戜负10锛寉-杞翠繚鎸佷笉鍙樸€傚綋鍓嶄綅缃负(10,90)锛屾渶鍚庣敤L鍛戒护绉诲姩鍒颁綅缃拰鏈€鍚庝竴涓偣(10,90)涔嬮棿鐢讳竴鏉＄洿绾匡紝鍥涗釜杈瑰氨鐢诲ソ浜嗐€傛€濊€冿紵浠庝笂闈㈢殑鍙傛暟鍜屼緥瀛愬彲浠ユ兂璞″埌锛屽叾瀹炴渶鍚庝竴姝ョ殑瀹炵幇鏈夊嚑绉嶆柟寮忋€?svgwidth="100px"height="100px"version="1.1"xmlns="http://www.w3.org/2000/svg">杈惧埌鍚屾牱鐨勬晥鏋滐紝Z鍛戒护鏄粠褰撳墠鐐圭洿鎺ョ敾涓€鏉＄洿绾垮埌璧风偣锛岃€孷鍦ㄦ湰渚嬩腑浣跨敤鏈€鍚庝竴姝ュ瀭鐩寸Щ鍔紝鎵€浠ヤ篃鍙互鍋氬埌銆備笂闈㈡槸缁濆璺濈锛屽綋鐒朵綘涔熷彲浠ョ敤鐩稿璺濈鏉ョ敾锛岀敤灏忓啓瀛楁瘝銆?svgwidth="100px"height="100px"version="1.1"xmlns="http://www.w3.org/2000/svg">CurvecommandC(curveto)CubicBeziercurve涓夋璐濆灏旀洸绾块渶瑕佸畾涔変竴涓偣鍜屼袱涓帶鍒剁偣锛岀敤C鍛戒护鍒涘缓銆?x,y)琛ㄧず鏇茬嚎鐨勭粓鐐癸紝(x1,y1)鏄捣鐐圭殑鎺у埗鐐癸紝(x2,y2)鏄粓鐐圭殑鎺у埗鐐广€傛帶鍒剁偣鎻忚堪鐨勬槸鏇茬嚎璧风偣鐨勬枩鐜囷紝鏇茬嚎涓婂悇鐐圭殑鏂滅巼鏄粠璧风偣鏂滅巼鍒扮粓鐐规枩鐜囩殑閫愭笎鍙樺寲杩囩▼銆傚懡浠ゅ弬鏁帮細Cx1y1,x2y2,xycdx1dy1,dx2dy2,dxdy绀轰緥锛?svgwidth="200px"height="200px"version="1.1"xmlns="http://www.w3.org/2000/svg">浣滅敤锛氫唬鐮佽В閲婏細浠鍒涘缓璧风偣(10,10),C鍒涘缓涓€涓互(50,10)涓虹粓鐐癸紝(20,20)涓鸿捣鐐癸紝(40,10)涓虹粓鐐圭殑鎺у埗鐐广€傜粰瀹冨姞涓婅緟鍔╃偣锛岀湅鏁堟灉鍜屼唬鐮?svgwidth="200px"height="200px"version="1.1"xmlns="http://www.w3.org/2000/svg">鍘熺悊鍒嗘瀽锛氱湅涓嬪浘锛屾洸绾挎部鐫€璧风偣鍒扮涓€涓帶鍒剁偣鐨勬柟鍚戜几灞曪紝閫愭笎寮洸锛岀劧鍚庢部鐫€绗簩涓帶鍒剁偣鎸囧悜endpoint鏂瑰悜ends銆係锛坰moothcurveto锛夌缉鍐欎笁娆¤礉濉炲皵鏇茬嚎S瀹為檯涓婂垱寤轰簡涓€鏉＄壒娈婄殑涓夋璐濆灏旀洸绾裤€傚畠鐨勭壒娈婁箣澶勫湪浜庡綋涓€涓偣鐨勪竴渚х殑鎺у埗鐐逛笌鍙︿竴渚х殑鎺у埗鐐瑰绉版椂锛屽嵆鏂滅巼淇濇寔涓嶅彉銆?x,y)琛ㄧず鏇茬嚎鐨勭粓鐐癸紝(x2,y2)鏄棦鏄粓鐐瑰張鏄捣鐐圭殑鎺у埗鐐广€傚懡浠ゅ弬鏁帮細Sx2y2,xysdx2dy2,dxdy渚嬪瓙锛氬厛鐢讳竴鏉′笁娆¤礉濉炲皵鏇茬嚎鏁堟灉锛氬湪cubicBezier涓娇鐢ㄩ€熻cubic鏇茬嚎鍚庨潰鐨勮礉濉炲皵鏇茬嚎锛岀敤S鍛戒护缁樺埗閫熻涓夋璐濆灏旀洸绾裤€?svgwidth="400px"height="200px"version="1.1"xmlns="http://www.w3.org/2000/svg">浣滅敤锛氱浉褰撲簬鍦ㄨ捣鐐逛娇鐢ㄤ笂涓€鏉′笁娆¤礉濉炲皵鏇茬嚎缁堢偣鐨勬枩鐜囷紝骞朵笖缁樺埗A闀滃儚涓夋璐濆灏旀洸绾裤€傛爣璁拌緟鍔╃偣鏁堟灉锛氱敱钃濊壊绾挎潯杩炴帴閭ｄ竴鐐瑰疄闄呬笂鏄粠鍓嶄竴鐐光€滃€熸潵鈥濈殑銆傛敞鎰忥細濡傛灉S鎸囦护璺熷湪C鎸囦护鎴栧彟涓€涓猄鎸囦护涔嬪悗锛屽垯鍏剁涓€涓帶鍒剁偣灏嗚鍋囧畾涓哄墠涓€涓帶鍒剁偣鐨勫绉扮偣銆?濡傛灉鍗曠嫭浣跨敤涓€涓猄鎸囦护锛屾病鏈夊墠闈㈢殑C鎸囦护鎴栧彟涓€涓猄鎸囦护锛屽畠鐨勪袱涓帶鍒剁偣琚涓烘槸鍚屼竴涓偣銆俀(quadraticB茅ziercurve)浜屾璐濆灏旀洸绾夸簩娆¤礉濉炲皵鏇茬嚎Q鍙渶瑕佷竴涓帶鍒剁偣鏉ョ‘瀹氭洸绾胯捣鐐瑰拰缁堢偣鐨勬枩鐜囥€傚洜姝ゅ畠闇€瑕佷袱缁勫弬鏁帮紝鎺у埗鐐瑰拰缁堢偣鍧愭爣銆俀x1y1,xyqdx1dy1,dxdy绀轰緥锛?svgwidth="200px"height="200px"version="1.1"xmlns="http://www.w3.org/2000/svg">浣滅敤锛氫笌涓夋璐濆灏旀洸绾跨浉姣旓紝鍙湁涓€涓帶鍒剁偣锛屽嵆涓€涓偣鏄悓鏃舵帶鍒惰捣鐐瑰拰缁堢偣锛屾爣璁拌緟鍔╃偣鏁堟灉锛歍锛堝钩婊戜簩娆¤礉濉炲皵鏇茬嚎锛夌缉鍐欎簩娆ezier浜屾璐濆灏旀洸绾縏锛屾槸鏇茬嚎鐨勭畝鍐欙紝鍙渶瑕佷竴涓鐐广€俆xytdxdy鏄剧ず绀轰緥锛?svgwidth="400px"height="200px"version="1.1"xmlns="http://www.w3.org/2000/svg">鏁堟灉锛氬姞涓婅緟鍔╃嚎鍜岀偣鏁堟灉锛氭敞鎰忥細T鍛戒护涔嬪墠蹇呴』鏈塓鍛戒护锛屾垨鑰呭叾浠栧彧鏈変竴涓猅鎸囦护鍙互杈惧埌杩欑鏁堟灉銆傚鏋滃崟鐙娇鐢═锛屾帶鍒剁偣浼氳璁や负鍜岀粓鐐规槸鍚屼竴涓偣锛屾墍浠ョ敾鍑烘潵鐨勬槸涓€鏉＄洿绾裤€侫(ellipticalArc)Arc鍛戒护鐢ㄤ簬缁樺埗寮с€侫rxryx-axis-rotationlarge-arc-flagsweep-flagxyarxryx-axis-rotationlarge-arc-flagsweep-flagdxdy鍙傛暟璇存槑鍦嗗姬鎸囦护A鐨勫墠涓や釜鍙傛暟rx鍜宺y鍒嗗埆涓簒杞村崐寰勫拰y杞村崐寰勩€傚渾寮ф寚浠鐨勭涓変釜鍙傛暟琛ㄧず鍦嗗姬鐨勬棆杞€俵arge-arc-flag鍒ゆ柇鍦嗗姬鏄ぇ浜庤繕鏄皬浜?80搴︼紝0琛ㄧず灏忚搴﹀渾寮э紝1琛ㄧず澶ц搴﹀渾寮с€俿weep-flag琛ㄧず鍦嗗姬鐨勬柟鍚戯紝0琛ㄧず浠庤捣鐐瑰埌缁堢偣閫嗘椂閽堢敾鍦嗗姬锛?琛ㄧず浠庤捣鐐瑰埌缁堢偣椤烘椂閽堢敾鍦嗗姬銆倄锛氱粓鐐圭殑x鍧愭爣銆倅锛氱粓鐐圭殑y鍧愭爣銆傜ず渚嬶細鏁堟灉锛氫唬鐮佸垎鏋愶細鐢诲竷涓婃湁涓€鏉″瑙掔嚎锛屼腑闂存湁涓ゆ潯妞渾寮ц瀵硅绾垮垏鍓诧紙x鍗婂緞=30锛寉鍗婂緞=50锛夈€傜涓€涓き鍦嗗姬鐨剎-axis-rotation锛坸杞存棆杞搴︼級涓?锛屾墍浠ヨ寮ф墍鍦ㄧ殑妞渾鏄洿绔嬬殑锛堟病鏈夊€炬枩锛夈€傚湪绗簩涓き鍦嗗姬涓紝x-axis-rotation璁剧疆涓?45锛屾墍浠ヨ繖鏄竴涓棆杞簡45搴︾殑妞渾锛屼互鐭酱涓哄垎鐣岀嚎锛屽舰鎴愪袱涓绉扮殑鍦嗗姬銆傜患涓婃墍杩帮紝鎴戝浼氫簡鐩寸嚎鍛戒护锛屽挨鍏舵槸闅炬噦鐨勬洸绾垮懡浠ゃ€傜粯鍒跺钩婊戞洸绾跨殑鍛戒护鏈?绉嶏紝鍏朵腑涓ょ鐢ㄤ簬缁樺埗璐濆灏旀洸绾匡紝鍙︿竴绉嶇敤浜庣粯鍒跺渾寮ф垨閮ㄥ垎鍦嗐€傚湪璺緞鍏冪礌涓紝鍙湁涓ゆ潯璐濆灏旀洸绾匡細涓夋璐濆灏擟鍜屼簩娆¤礉濉炲皵Q銆傝繖閲岃繕瑕佹敞鎰忎娇鐢ㄧ缉鍐欒礉濉炲皵鏇茬嚎鐨勫墠鎻愩€傛渶闅剧殑褰撶劧鏄姬绾裤€傚綋鐒讹紝鐪嬪埌杩欓噷锛屾湁浜涙湅鍙嬪彲鑳戒細鏈夌枒鎯戙€傛湁蹇呰瀛︿範濡備綍缁樺埗杩欑澶嶆潅鐨凷VG鍚楋紵鍏充簬杩欎釜闂锛屽叾瀹炲啓杩欑瘒鏂囩珷鐨勭洰鐨勪笉鏄浣犳墜鍐橲VG锛岃€屾槸浜嗚ВSVG鐨勭粯鍒舵柟娉曘€傚ぇ閮ㄥ垎鐨凷VG閮芥槸閫氳繃涓€浜涚煝閲忓浘褰㈠伐鍏峰埗浣滃嚭鏉ョ殑锛屼絾鏄粏蹇冪殑浣犳湁娌℃湁娉ㄦ剰鍒帮紝涓婇潰鐨勪竴浜涙搷浣滐紝涓嶆鏄搴旂潃鎴戜滑浣跨敤AI绛夊伐鍏疯繘琛岀粯鍒剁殑鍦烘櫙鍚楋紵瀛︿範鎬诲湪鑴氫笅锛岀Н绱篃鎬诲湪鑴氫笅銆傛劅璋竾鑳界殑缃戠粶璺緞-SVG|MDN鍜屽嫟濂嬬殑鑷繁锛屼釜浜哄崥瀹紝GitHub娴嬭瘯锛孏itHub鍏紬鍙?guizimo锛屽皬绋嬪簭-灏忛鍗氬
