亚博现金网

杭州网页设计:可伸缩矢量图形(SVG)入门

2019.08.02 mf_web

96

亚博现金网ZUOWEIHANGZHOUWANGYESHEJISHI,NINYINGGAIZHIDAORUHEZAIWANGZHANZHONGSHISHISVG(KESUOFANGSHILIANGTUXING)。XIANZAIRANGWOMENLAIKANKANSVGDEJICHUZHISHI,YIJIGENGFUZADESHEJI,RUHUIBIAOHUOTUBIAO。

我们将要创造什么

SVG入门

上面的图片是截图 - 我们将使用SVG而不是图像..

分辨率独立

亚博现金网ZUIJINZAIWWDC 2012SHANG, AppleXUANBUFABUXINDESHIWANGMOXIANSHIQIMacBook Pro。RetinaXIANSHIQIJUYOUBIPUTONGPINGMUHUOXIANSHIQIGENGGAODEXIANGSUMIDU(220.5ppi),BINGQIEAppleSHENGCHENGTAMENDESHIWANGMOJISHUXIANGSUMIDUFEICHANGGAO,YIZHIYUYANJINGZAIDIANXINGDEGUANKANJULICHUWUFAZHUYIDAOXIANGSUHUA。RUGUONIQINYANMUDULESHIWANGMOXIANSHI,NEIMEWOXIANGXINNIHUITONGYITAMENKANQILAIHENBANG。RANER,ZHEIXIESHIWANGMOXIANSHIQIKENENGKAISHIJIWOMENDEWANGYESHEJISHIDAILAIWENTI。

亚博现金网YIQIANBAOCUNWEI72ppiDETUXIANGXIANZAIKAISHIZAISHIWANGMOXIANSHIQISHANGKANQILAINIUQUSHICHUXIANWENTI。ZHEIGEWENTIDEJIEJUEFANGANRENGWEI100%JIEJUE,SHEJIRENYUANZHENGZAIXUNZHAOCHANGSHIJIEJUECIWENTIDEXINFANGFA。

YIZHONGKENENGDEJIEJUEFANGAN(ZAIMOUXIEQINGKUANGXIA)SHISHIYONGSVG。NIWEISHENMEYAOSHIYONGSVG?SVGBEIXUANRANWEISHILIANG,YINCIKEYIKUOZHANDAOWOMENZHENGZAICHAKANTAMENDERENHEPINGMUFENBIANLV,TONGSHIBAOCHIWOMENZAISHEJITAMENSHISUOYUQIDEQINGXIDUHEJINGTIZHILIANG。

ZHEIBUHUIJIEJUESUOYOUWENTI; WOMENWUFASHIYONGSVGXUANRANJIYUXIANGSUDETUXIANG,LIRU.jpgHUOpng(DANSHI,WEICIWOMENZONGSHIKEYISHIYONGcanvasBIAOJI)。DANGSHEJIDAOCHATUTUBIAOHUOHUIBIAOZHILEIDEDONGXISHI,SVGZHENGMINGFEICHANGYOUYONG。JINTIAN,WOJIANGXIANGNINZHANSHISHIYONGSVGDEJICHUZHISHI,YIJIYANSHIRUHESHIYONGNINZAIAdobe IllustratorZHONGSHEJIDEXIANGLIANGBINGQINGSONGDIZAININDEWANGZHANZHONGSHIXIANTAMEN。

SVG总结为十分

亚博现金网ZAIWOMENJINRUZHIQIAN,WOJIANGJIANYAOJIESHAOYIXIASVG:

  • SVGDAIBIAOKESUOFANGSHILIANGTUXING。

  • SVGYONGYUZAIWebSHANGDINGYISHILIANGTUXING。

  • XMLGESHIYONGYUDINGYISHILIANGTUXING。

  • SVGZAIDIAOZHENGDAXIAOHUOSUOFANGSHIBUHUISHIQUZHILIANG。

  • SVGKEYIDONGHUA。

  • SVGYUdomJICHENG,KEYIYUJavaScriptHECSSYIQISHIYONG。

  • 亚博现金网SVGKEYIBEIBIANRUSUOYIN,ZHEIYIWEIZHERUGUONIZAISVGZHONGYOUWENBEN,NEIMESOUSUOYINQINGHUIXUANZETA。

  • 亚博现金网SVGKEYIRENHEFENBIANLVDAYIN。

  • 亚博现金网SVGMUQIANSHIW3CDETUIJIAN。

  • SVGSHIYONGYUSUOYOUXIANDAILIULANQI,DANZAIIE 8HUOGENGDIBANBENZHONGBUZHICHI。CHAJIANKEYIYONGYURENHEDIYUGAIZHIDECHAJIAN。

让我们创建一些SVG形状

RANGWOMENKAISHIBA。WOMENJIANGCHUANGJIANYITIAOXIAN。WOMENTONGGUOJIANGYIXIADAIMATIANJIADAOHTMLWENDANGLAIWANCHENGCICAOZUO。

1
2
3
<svg>
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/></line>
</svg>

亚博现金网SHOUXIANWOMENSHIYONG'svg'BIAOQIANRANHOUZAILIMIANTIANJIAxmlBIAOJI。ZHEISHIWOMENDINGYIDENEIRONG:

  • X1: xZHOUSHANGXIANDEQISHIWEIZHI

  • Y1: yZHOUSHANGXIANDEQISHIWEIZHI

  • X2: xZHOUSHANGXIANDEZHONGDIANWEIZHI

  • Y2: yZHOUSHANGXIANDEZHONGDIANWEIZHI

亚博现金网YINCI,LIRU,RUGUOWOMENXIANGYAOCHUANGJIANYITIAODUIJIAOXIAN,NEIMEWOMENKEYIJIANGy2SHUXINGSHEZHIWEI200,ZHEIJIANGSHIGAIXINGDEZHONGDIANJIANSHAO200,CONGERCHUANGJIANYITIAODUIJIAOXIAN。WOMENYEKEYIYINGYONGYIXIEYANGSHI,WOMENYONGCSSZUODAOZHEIYIDIAN。ZHEILIWOMENSHIYONGLEYIXIENEILIANYANGSHI,DANRUGUONINYUANYI,KEYIZAIWAIBUYANGSHIBIAOZHONGSHIYONGTAMEN。

SVG  - 创建一条线

1
2
3
<svg>
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>
</svg>

CHULEYIXIESHUXINGZHIWAI,KEYIYIYUXIANLEISIDEFANGSHICHUANGJIANYUAN。ZAIZHEILI,WOMENJIANGCHUANGJIANYIGEYINSEYUANQUAN,HEISEBIANKUANG,BANJINGWEI50。

SVG  - 创建一个圆圈

1
2
3
<svg>  
    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>
</svg>

亚博现金网cxHEcySHUXINGSHIWOMENKEYISHEZHIYUANQUANZHONGJIANDExHEyZUOBIAODESHUXING。RUGUOWOMENCUOGUOLEZHEIXIESHUXING,NEIMEYUANQUANDEZHONGXINJIANGBEISHEZHIWEI“0”,ZHEIJIANGDAOZHIYUANQUANCONGYEMIANZHONGBEIQIECHU。ZUIHOU,BIAOJIWEI“r”DESHUXINGSHEZHIYUANDEBANJING。

矩形

ZHENGRUNINXIANZAISUOKANDAODE,SHIYONGSVGCHUANGJIANXINGZHUANGFEICHANGJIANDAN。CHUANGJIANJUXINGYEBULIWAI。

SVG  - 创建一个矩形

1
2
3
<svg>
<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>
</svg>

YUZAICSSZHONGSHEZHIYUANSUDEKUANDUHEGAODULEISI,WOMENYESHIYONGsvg'rect'SHUXING。

椭圆

TUOYUANDEGONGZUOFANGSHIYUCHUANGJIANYUANDEFANGSHIJIHUXIANGTONG,DANSHI,ZHEICIERBUSHIZHIYOUYIGEGUDINGDEBANJING,WOMENYOUxHEyBANJINGDEDANDUSHUXING。

SVG  - 创建一个椭圆

1
2
3
<svg>
 <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
</svg>

多边形

亚博现金网DUOBIANXINGBIANDEYOUDIANJISHOU(DANZHIYOUYIDIANDIAN)。WOMENSHOUXIANJIDUOBIANXINGYIGETIANCHONGYANSE,YIGECHENGSEDEBIHUAHEYIGE10DEBICHUKUANDU。RANHOUWOMENJIANGDIANSHUXINGCHUANDIJITA。MEIDUIZUOBIAODINGYIDUOBIANXINGDEMEIGEJIAODIANDExHEyZUOBIAO。ZAIZHEIGEYANSHIZHONG,WOCHUANGZAOLEYIGEMINGXING。

SVG  - 创建多边形星

1
2
3
<svg>
    <polygon fill="green" stroke="orange" stroke-width="10" points="350, 75  379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
</svg>

文本

RUQIANSUOSHU,SVGHENBANG,YINWEIDANGWOMENBAOHANWENBENSHI,SOUSUOYINQINGNENGGOUDUIQIJINXINGSUOYIN - YUQITAXUANRANYINQING(RUFlash)BUTONG。

ZHEISHIWOMENTIANJIAWENZIDEFANGSHI:

SVG  - 创建文本

1
<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

亚博现金网ZAISHANGMIANDEDAIMAZHONG,NINKEYIKANDAOWOMENTIANJIALExHEyZUOBIAO。RANHOUSHEZHIYIXIECSSYANGSHI,RUZITIXILIE,ZHONGLIANG,DAXIAOHEYANSE。

路径

ZAILUJINGBIAOJINEI,WOMENXUYAOZHUANZHUYU'd'SHUXING。CI“d”SHUXINGMIAOSHULEYAOCHUANGJIANDELUJING。'd'SHUXINGZHONGDEMEIGEMINGLINGDOUSHIYIXIAMINGLINGZIMUZHIYI,HOUGENQICANSHU。'd'SHUXINGDEMINGLINGRUXIA:

  • M:BANDAO

  • L: lineto

  • H:SHUIPINGXIAN

  • V:CHUIZHIXIAN

  • 亚博现金网C: curveto

  • S:PINGHUAQUXIAN

  • WEN:ERCIBEISAIERQUXIAN

  • T:PINGHUADEERCIBEISAIERQUXIAN

  • DA:TUOYUANHU

  • Z:JINLU

SVG  - 创建路径

ZHEISHIYIXIESHILIDAIMA:

1
2
3
<svg>    
    <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path> 
</svg>

亚博现金网WOMENSHENZHIKEYICONGSHANGMIANSHEZHIWOMENDEWENBENYIZUNXUNZHEIYANGDELUJING:

SVG  - 创建文本

1
2
3
4
6
7
8
<svg>    
    <defs>       
        <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>    
    </defs> 
    <text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">     
        <textPath xlink:href="#path1">webdesigntuts+</textPath>    
    </text> 
</svg>

亚博现金网WOMENJIBENSHANGZAI'defs'BIAOQIANZHONGDINGYILELUJING,BINGJITAYIGEidWEI'path1'。RANHOU,WOMENKEYISHIYONG'textPath'SHUXINGJIANGQIYINGYONGYUWENBEN。

创建可扩展的SVG徽标和图标

HANGZHOUWANGYESHEJIXIANZAIWOMENYIJINGJIESHAOLESHIYONGSVGCHUANGJIANXINGZHUANGDEJICHUZHISHI,XIANZAISHISHIHOUJINXINGYIXIEGENGFUZADESHIQINGLE。XINGYUNDESHI,SUIRANTABINGMEIYOUCHENGWEINEIGEFUZA,QISHITASHIJISHANGSHIFEICHANGJIANDANDEGANXIEAdobe IllustratorZHONG。DUIYUNEIXIEBULEJIEIllustratorDEREN,KEYIMIAOSHUWEI:

YEJIESHOUQUYIZHIDESHILIANGHUITUHUANJING,YONGYUCHUANGJIANKEKUAMEITIKUOZHANDETUXING。

DAKAIIllustratorBINGCHUANGJIANHUIBIAOHUOTUBIAO。DADUOSHUZHUANYEHUIBIAODOUYINGGAISHIYONGSHILIANGCHUANGJIAN,ZHEIYANGNINJIUKEYICONGKEHUNEILIHUODETAMEN。RUGUOMEIYOU,NEIMENINKEYICHANGSHIZIJIZHONGXINCHUANGJIANTAMEN。RUGUONINBUSHUXIZAIIllustratorZHONGGONGZUO,NEIMEVectortuts +SHANGHUITIGONGDALIANGXINXI

HUODEHUIBIAOHUOTUBIAOHOU,ZHUANDAO“WENJIAN>LINGCUNWEI”,RANHOUCONG“BAOCUNLEIXING”XIALALIEBIAOZHONGXUANZE“SVG”。WEIWENJIANMINGMING,RANHOUDANJI“BAOCUN”。RANHOUYINGDAKAISVGXUANXIANGDUIHUAKUANG。CONGNEILIXUANZE“XIANSHISVGDAIMA”。RANHOU,ZHEIJIANGZAILIULANQIZHONGDAKAIDAIMA。NIZHIXUYAOZAIsvgBIAOQIANZHIJIANFUZHIBINGBAOHANsvgBIAOQIANJIUKEYILE。ZHEIYOUDUOJIANDAN?

SVG  - 从Adobe Illustrator中保存
SVG  - 显示Adobe Illustrator中的代码

NINHAIKEYISHIYONGIllustratorCHUANGJIANLUJING。ZHIXUZAIIllustratorZHONGHUIZHIYITIAOXIAN,JIUKEYIHUOQUKEYONGYULUJINGDE“d”SHUXINGSHUJU,RUQIANSUOSHU。LIRU,WOWEISHANGMIANDE'webdesigntuts +'WENBENCHUANGJIANDELUJINGSHIZAIIllustratorZHONGCHUANGJIANDE,RANHOUDAOCHUDAOWODEWENDANGZHONG。

亚博现金网RANHOU,NINKEYISHIYONGBIAOZHUNCSSFANGFAJIANGSVGBIAOJISHEZHIHUODINGWEIDAOWENDANGZHONG。NINHAIKEYIJIANGQIBAOZHUANGZAIMAOBIAOJIZHONGYICHUANGJIANLIANJIE,HUOSHIYONGJavaScriptJIANGQIDINGWEIYITIANJIAEWAIDEGONGNENG。

结论

HANGZHOUWANGYESHEJIXIANZAI,SHIWANGMOHEXIANGSUMIDUSHIWOMENSHIYONGDEMEIGESHEBEIHEPINGMUDEYIBUFENZHISHIYIGESHIJIANWENTI,BINGQIEZHEIJIANGJIXUYIGENGDADEMIDUTUIJIN。TONGGUOSHIYONGSVG,WOMENNENGGOUCHUANGJIANKESUOFANGDETUXING,SHIPINGMUQINGXI,SUIZHEPINGMUFENBIANLVDETIGAO,TAJIANGWEIWEILAIZUOHAOZHUNBEI。DANGRAN,SVGZAIGEZHONGQINGKUANGXIABINGBUSHIYONG,DANDUIYUWANGLUOSHANGJIYUSHILIANGDECHATUERYAN,TAJUEDUISHIZUIHAODEQIANJINFANGSHI。

ZUIXINANLI

联系电话 400-6065-301

JIANZHANZIXUN XINGZONGJIAN

TOUSU