{"id":1023,"date":"2014-09-08T21:37:06","date_gmt":"2014-09-08T13:37:06","guid":{"rendered":"http:\/\/www.storagelab.org.cn\/zhangdi\/?p=1023"},"modified":"2014-09-08T21:37:06","modified_gmt":"2014-09-08T13:37:06","slug":"d3%e5%8f%af%e8%a7%86%e5%8c%96%e5%ae%9e%e6%88%9801%ef%bc%9a%e7%90%86%e8%a7%a3svg%e5%85%83%e7%b4%a0%e7%89%b9%e6%80%a7","status":"publish","type":"post","link":"https:\/\/www.divis.cn\/index.php\/2014\/09\/08\/d3%e5%8f%af%e8%a7%86%e5%8c%96%e5%ae%9e%e6%88%9801%ef%bc%9a%e7%90%86%e8%a7%a3svg%e5%85%83%e7%b4%a0%e7%89%b9%e6%80%a7\/","title":{"rendered":"d3\u53ef\u89c6\u5316\u5b9e\u621801\uff1a\u7406\u89e3SVG\u5143\u7d20\u7279\u6027"},"content":{"rendered":"<blockquote><p>\u5173\u4e8eD3.js\uff0c\u6211\u539f\u8ba1\u5212\u76f4\u5148\u4ee5\u5176\u6838\u5fc3\u5185\u5bb9\u2014\u2014\u6570\u636e\u9a71\u52a8\u4f5c\u4e3a\u6211\u7684\u5b9e\u6218\u6587\u7ae0\u7684\u7b2c\u4e8c\u7bc7\u3002\u4f46\u662f\u60f3\u6765\u60f3\u53bb\uff0c\u8fd8\u662f\u51b3\u5b9a\u628a\u6211\u5bf9SVG\uff08\u53ef\u7f29\u653e\u77e2\u91cf\u56fe\u5f62\uff0cScalable Vector Graphics\uff09\u7684\u7406\u89e3\u5148\u68b3\u7406\u4e00\u904d\u3002\u6211\u5766\u8bda\u8fd9\u662f\u56e0\u4e3a\u6211\u66fe\u8e29\u8fc7\u5730\u96f7\u2014\u2014\u6211\u4e00\u5f00\u59cb\u8ba4\u4e3aSVG\u5f88\u7b80\u5355\uff0c\u7a0d\u5fae\u4e86\u89e3\u4e86\u600e\u4e48\u53d8\u6362\u5c31\u76f4\u63a5\u53bb\u641e\u9879\u76ee\u4e86\uff0c\u7ed3\u679c\u9047\u5230\u5f88\u591a\u95ee\u9898\u3002\u6240\u4ee5\u8fd8\u662f\u5f97\u4e0d\u538c\u5176\u70e6\u5730\u603b\u7ed3\u4e00\u4e0b\u3002<\/p><\/blockquote>\n<h2>\u4e00. SVG\u7b80\u4ecb<\/h2>\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014<\/p>\n<p>SVG\u662f\u4e00\u79cd\u548c\u56fe\u50cf<a title=\"\u5206\u8fa8\u7387\" href=\"http:\/\/zh.wikipedia.org\/wiki\/%E5%88%86%E8%BE%A8%E7%8E%87\">\u5206\u8fa8\u7387<\/a>\u65e0\u5173\u7684<a title=\"\u77e2\u91cf\u56fe\u5f62\" href=\"http:\/\/zh.wikipedia.org\/wiki\/%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%BD%A2\">\u77e2\u91cf\u56fe\u5f62<\/a>\u683c\u5f0f\uff0c\u5b83\u4f7f\u7528\u4e25\u683c\u7684XML\u8bed\u6cd5\u63cf\u8ff0\u56fe\u5f62\u5185\u5bb9\u3002\u5173\u4e8e\u5b83\uff0c\u4e3b\u673a\u4f4d\u4e8e\u9ebb\u7701\u7406\u5de5\u5b66\u9662\u7684W3c\u5b98\u7f51\u6709\u7740\u5168\u9762\u7684\u4ecb\u7ecd\uff08<a href=\"http:\/\/www.w3.org\/Graphics\/SVG\/\">http:\/\/www.w3.org\/Graphics\/SVG\/<\/a>\uff09\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large\" src=\"http:\/\/oysa7b8qz.bkt.clouddn.com\/Bitmap_VS_SVGsvg.png\" width=\"300\" height=\"192\" \/><\/p>\n<p>\u4e0a\u9762\u8fd9\u5f20\u56fe\u7247\u5c55\u793a\u4e86\u4f4d\u56fe\u548c\u77e2\u91cf\u56fe\u7684\u533a\u522b\u3002\u4f4d\u56fe\u662f\u7531\u70b9\u6784\u6210\u7684\uff0c\u77e2\u91cf\u56fe\u5219\u662f\u7531\u4e00\u4e9b\u5f62\u72b6\u5143\u7d20\u6784\u6210\u3002\u8be5\u56fe\u4e2d\u663e\u793a\u653e\u5927\u4f4d\u56fe\u53ef\u4ee5\u770b\u5230\u70b9\uff0c\u800c\u653e\u5927\u77e2\u91cf\u56fe\u770b\u5230\u7684\u4ecd\u7136\u662f\u5f62\u72b6\u3002SVG\u5c5e\u4e8e\u77e2\u91cf\u56fe\uff0c\u56e0\u6b64\u80fd\u591f\u65e0\u7ea7\u7f29\u653e\uff0c\u800c\u4e0d\u4f1a\u5bfc\u81f4\u9a6c\u8d5b\u514b\u3002<\/p>\n<p>\u6211\u4e2a\u4eba\u8ba4\u4e3a\u60f3\u8981\u4e86\u89e3\u4e00\u95e8\u8bed\u8a00\uff0c\u4e0d\u8bba\u5b83\u662f\u8ba1\u7b97\u673a\u8bed\u8a00\u8fd8\u662f\u81ea\u7136\u8bed\u8a00\uff0c\u5b83\u7684\u4ea7\u751f\u53d1\u5c55\u7684\u5386\u53f2\u90fd\u662f\u975e\u5e38\u597d\u7684\u5207\u5165\u70b9\u3002<\/p>\n<p>SVG\u6700\u65e9\u4e8e1999\u5e74\u7531\u4e00\u7cfb\u5217\u52a0\u5165W3C\u7684\u516c\u53f8\u63d0\u51fa\uff0c\u5e76\u4e14SVG\u5f88\u65e9\u5c31\u56e0\u4e3a\u5b83\u7684\u6613\u8bfb\u3001\u53ef\u7f16\u8f91\u3001\u6613\u4e8e\u8fdb\u884c\u811a\u672c\u63a7\u5236\u548c\u6613\u4e8e\u5236\u4f5c\u7f51\u9875\u4e0a\u7684\u4ea4\u4e92\u56fe\u5f62\u7b49\u4f18\u70b9\u800c\u4e3a\u4eba\u4eec\u6240\u77a9\u76ee\uff0c\u4f46\u57282011\u5e74\u624d\u6700\u7ec8\u88ab\u6536\u5f55\u4e3aW3C\u6807\u51c6\u3002IE\u7cfb\u5217\u957f\u671f\u4e0d\u80fd\u652f\u6301SVG\uff0c\u76f4\u5230IE9\u3002\u9020\u6210\u8fd9\u79cd\u7ed3\u679c\u662f\u6709\u7740\u6df1\u523b\u7684\u5386\u53f2\u539f\u56e0\u3002<\/p>\n<p>SVG\u683c\u5f0f\u7edd\u975e\u7b2c\u4e00\u79cd\u77e2\u91cf\u56fe\u5f62\u683c\u5f0f\u3002\u5728\u5b83\u88ab\u63d0\u51fa\u7684\u524d\u4e00\u5e74\uff0c\u8fd8\u6709adobe\u8054\u5408IBM\u3001netscape\u3001SUN\u63d0\u51fa\u7684PGML\u683c\u5f0f\uff08Precision Graphics Markup Language\uff09\u548c\u5fae\u8f6f\u63d0\u51fa\u7684VML\u683c\u5f0f\uff08Vector Markup Language\uff09\u88ab\u63d0\u4ea4\u7ed9\u4e86W3C\u3002\u6b63\u5728\u4e8c\u8005\u56e0\u4e3a\u6fc0\u70c8\u7684\u5546\u4e1a\u7ade\u4e89\u76f8\u6301\u4e0d\u4e0b\u7684\u65f6\u5019\uff0cW3C\u542f\u52a8\u4e86\u4e00\u4e2a<a href=\"http:\/\/en.wikipedia.org\/wiki\/SVG_Working_Group\">SVG\u5de5\u4f5c\u5c0f\u7ec4<\/a>\uff0c\u82b1\u4e866\u4e2a\u6708\u65f6\u95f4\u5728PGML\u548cVML\u7684\u57fa\u7840\u4e4b\u4e0a\u5f00\u53d1\u51fa\u4e86SVG\u6807\u51c6\uff0c\u5e0c\u671b\u5f25\u5408\u4e24\u5927\u9635\u8425\u7684\u5206\u6b67\u2014\u2014\u4f46\u7ed3\u679c\u662fSVG\u6210\u4e86\u7b2c\u4e09\u4e2a\u7ade\u4e89\u8005\u3002\u4e0d\u8fc7\u7531\u4e8eSVG\u7684\u79cd\u79cd\u4f18\u52bf\u548c\u4e0ePGML\u7684\u8bb8\u591a\u76f8\u4f3c\u6027\uff0cPGML\u9635\u8425\u7684\u516c\u53f8\u5f88\u591a\u90fd\u52a0\u5165\u4e86SVG\u9635\u8425\u3002\u4f46\u662f\u5fae\u8f6f\u4f9d\u65e7\u6211\u884c\u6211\u7d20\u3002\u56e0\u4e3a\u5f53\u65f6\u5fae\u8f6f\u5df2\u7ecf\u662f\u72ec\u9738\u5929\u4e0b\uff0c\u5728\u6d4f\u89c8\u5668\u4e4b\u4e89\u4e2d\u9760\u7740\u6346\u7ed1\u7b56\u7565\u628anetscape\u6253\u5f97\u722c\u4e0d\u8d77\u6765\u3002\u867d\u7136\u5fae\u8f6f\u63d0\u51fa\u7684VML\u88abW3C\u62d2\u7edd\uff0c\u4f46\u5b83\u4f9d\u65e7\u53ea\u633a\u81ea\u5bb6\u7684\u5a03\uff0c\u56e0\u800c\u5728\u4e4b\u540e\u5fae\u8f6f\u63a8\u51fa\u7684IE5.0+\u548cmicrosoft office 2000+\u53ea\u80fd\u7528VML\uff0c\u76f4\u52302008\u5e74VML\u5b9e\u5728\u662f\u6ca1\u4eba\u7528\u800c\u88ab\u5fae\u8f6f\u653e\u5f03\u4e3a\u6b62\u3002\u9664\u6b64\u4ee5\u5916\uff0cadobe\u516c\u53f8\u7684flash\u4e5f\u4e00\u76f4\u9738\u5360\u7740\u77e2\u91cf\u56fe\u5f62\u7a0b\u5e8f\u7684\u5f88\u5927\u4e00\u5757\u5e02\u573a\u4efd\u989d\uff0c\u4e0e\u901a\u7528\u7684\u77e2\u91cf\u56fe\u5f62\u683c\u5f0fSVG\u4e92\u76f8\u7ade\u4e89\u3002\u4ee5\u4e0a\u95ee\u9898\u5bfc\u81f4\u76f4\u5230\u8bde\u751f12\u5e74\u540e\u76842011\u5e74\uff0cSVG\u624d\u88ab\u5217\u4e3aW3C\u6807\u51c6\u3002\u6211\u53ea\u80fd\u8bf4\uff0c\u6709\u4eba\u7684\u5730\u65b9\uff0c\u5c31\u6709\u6c5f\u6e56\uff0c\u6280\u672f\u6807\u51c6\u7684\u5236\u5b9a\u79bb\u4e0d\u5f00\u6c5f\u6e56\u89c4\u5219\u7684\u5e72\u6d89\u3002\u597d\u5728\u73b0\u5728\u5e02\u573a\u4efd\u989d\u7b2c\u4e00\u7684\u6d4f\u89c8\u5668\u5df2\u7ecf\u662f\u8c37\u6b4c\u7684chrome\uff0c\u800c\u4e0d\u662fIE\u4e86\u3002\u7279\u522b\u503c\u5f97\u4e00\u63d0\u7684\u662f\uff0c\u5728\u79fb\u52a8\u7aef\u9886\u57df\uff0c\u7531\u4e8e\u5fae\u8f6f\u7684\u8fb9\u7f18\u5316\uff0c\u6240\u4ee5SVG\u7684\u652f\u6301\u7387\u975e\u5e38\u9ad8\u3002\u5c3d\u60c5\u5730\u7528SVG\u5236\u4f5c\u4ea4\u4e92\u56fe\u5f62\u5427\uff01<\/p>\n<h2>\u4e8c.SVG\u7684\u57fa\u672c\u5143\u7d20<\/h2>\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014<\/p>\n<p>SVG\u6807\u7b7e\u6709\u5f88\u591a\uff0c\u8be6\u89c1\uff1a<a href=\"http:\/\/www.w3school.com.cn\/svg\/svg_reference.asp\">w3cSchool<\/a>\u3002\u4e3a\u4e86\u7b80\u5355\u8d77\u89c1\uff0c\u53ef\u4ee5\u628a\u5176\u5143\u7d20\u5206\u4e3a\u4e09\u5927\u7c7b\uff1a\u77e2\u91cf\u56fe\u5f62\u3001\u6587\u5b57\u3001\u5f15\u7528\u4f4d\u56fe\u3002\u5176\u4e2d\u5e38\u7528\u7684\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li>\u77e2\u91cf\u56fe\u5f62\uff1asvg(\u5b9a\u4e49svg\u6587\u6863\u7247\u6bb5), rect(\u5b9a\u4e49\u77e9\u5f62), circle(\u5b9a\u4e49\u5706\u5f62)\uff0cellipse(\u5b9a\u4e49\u692d\u5706)\uff0cpath(\u8def\u5f84)\uff0cline(\u7ebf)\uff0cploygon(\u591a\u8fb9\u5f62)\uff0ctitle(\u6807\u9898), desc(\u63cf\u8ff0)\uff0c g(\u7fa4\u7ec4)\uff0c defs(\u53c2\u8003\u5143\u7d20)\u3002<\/li>\n<li>\u6587\u5b57\uff1atext(\u6587\u5b57)\uff0c \u951a\u70b9\uff08a\uff09<\/li>\n<li>\u5f15\u7528\u4f4d\u56fe\uff1a\u00a0image(\u56fe\u7247\u5143\u7d20)<\/li>\n<\/ul>\n<p>\u8fd9\u4e9b\u5143\u7d20\u672c\u8eab\u5f88\u7b80\u5355\uff0c\u5149\u770b\u6587\u6863\u5c31\u53ef\u4ee5\u4e86\u89e3\uff0c\u4f46\u662f\u5176\u4e2d\u6211\u4e2a\u4eba\u89c9\u5f97\u503c\u5f97\u4e00\u63d0\u7684\u6709\u5982\u4e0b\u51e0\u70b9\uff1a<\/p>\n<ol>\n<li>SVG\u7684\u8def\u5f84\u529f\u80fd\u5f88\u5f3a\u5927\uff0c\u53ef\u4ee5\u5b9e\u73b0\u51e0\u4e4e\u4efb\u4f55\u56fe\u5f62\u3002\u518d\u52a0\u4e0asvg\u65e0\u635f\u7f29\u653e\u7684\u7279\u6027\uff0c\u5176\u4ed6\u524d\u7aef\u6280\u672f\u65e0\u51fa\u5176\u53f3\u3002<\/li>\n<li>\u63a7\u5236SVG\u5bf9\u8c61\u901a\u5e38\u9700\u8981\u4f7f\u7528\u63a7\u5236\u5176\u7279\u6709\u5c5e\u6027\uff0c\u4f8b\u5982\u586b\u5145\u989c\u8272\u662ffill, \u586b\u5145\u8fb9\u6846\u662fstroke\uff0c\u53d8\u5f62\u662ftransform, \u8fd9\u4e9b\u4e0ehtml\u5bf9\u8c61\u662f\u4e0d\u540c\u7684\u3002<\/li>\n<li><strong>SVG\u56fe\u5f62\u7684\u6ee4\u955c\u6548\u679c\u548c\u6e10\u53d8\u6548\u679c\uff0c\u9700\u8981\u4f7f\u7528svg\u7684\u6ee4\u955c\u6807\u7b7e\u6216\u8005\u6e10\u53d8\u6807\u7b7e\u4f5c\u4e3a\u8272\u5f69\u586b\u5145\u7684\u5f15\u7528\u5bf9\u8c61\u3002<\/strong>\uff08\u5728raphael\u7c7b\u5e93\u4e2d\u5bf9\u6b64\u6709\u5c01\u88c5\uff0c\u4f46\u662fd3\u6ca1\u6709\u3002d3\u4e0d\u592a\u5728\u4e4e\u8fd9\u4e9b\u6837\u5f0f\u95ee\u9898\uff0cd3\u7684\u91cd\u70b9\u5728\u4e8e\u6570\u636e\u8f6c\u6362\uff09<\/li>\n<li>SVG\u7684\u4f4d\u79fb\u3001\u65cb\u8f6c\u3001\u7f29\u653e\u3001\u53d8\u5f62\u529f\u80fd\u90fd\u53ef\u4ee5\u901a\u8fc7transform\u5c5e\u6027\u6765\u5b9e\u73b0\u3002\u914d\u5408SVG\u7684\u52a8\u753b\u6807\u7b7e\uff0c\u4e0d\u4f9d\u8d56JS\u3001CSS\u5373\u53ef\u521b\u9020\u51fa\u5404\u79cd\u52a8\u753b\u6548\u679c\u3002<\/li>\n<li>SVG\u4e2d\u4ea6\u53ef\u5305\u542b\u8d85\u94fe\u63a5\u951a\u70b9\u6807\u7b7e&lt;a&gt;\uff0c\u6587\u5b57\u6807\u7b7e&lt;text&gt;, \u56fe\u7247\u6807\u7b7e&lt;image&gt;\u7b49\uff0c\u6545\u800c\u53ef\u4ee5\u7eaf\u7528svg\u505a\u4e00\u4e2a\u7f51\u9875\uff0c\u8fd8\u662f\u5305\u542b\u52a8\u753b\u6548\u679c\u7684\u3002<\/li>\n<li>\u5b9e\u9645\u5e94\u7528\u4e2d\uff0c\u590d\u6742\u56fe\u5f62\u7684\u4ee3\u7801\u662f\u96be\u8bfb\u7684\u3002\u5c24\u5176\u662f\u6d89\u53ca\u591a\u5c42\u7fa4\u7ec4\u3001\u590d\u6742\u8def\u5f84\u3001\u5404\u79cd\u6ee4\u955c\u7684\u60c5\u51b5\u4e0b\u3002\u56e0\u6b64\u505a\u56fe\u5f62\u8bbe\u8ba1\u7684\u65f6\u5019\u51e0\u4e4e\u5fc5\u987b\u7528\u5230SVG\u7f16\u8f91\u5668\uff0c\u4f8b\u5982\u5927\u578b\u8f6f\u4ef6adobe illustrator\uff0c visio, CorelDRAW\uff0c\u5728\u7ebf\u5de5\u5177<a href=\"http:\/\/code.google.com\/p\/svg-edit\/\" rel=\"nofollow\">svg-edit<\/a>\uff0c\u5f00\u6e90\u8f6f\u4ef6<a title=\"Scribus\" href=\"http:\/\/zh.wikipedia.org\/wiki\/Scribus\">Scribus<\/a>\u3001<a title=\"Karbon14\" href=\"http:\/\/zh.wikipedia.org\/wiki\/Karbon14\">Karbon14<\/a>\u3001<a title=\"Inkscape\" href=\"http:\/\/zh.wikipedia.org\/wiki\/Inkscape\">Inkscape<\/a>\u4ee5\u53ca<a title=\"Sodipodi\uff08\u9875\u9762\u4e0d\u5b58\u5728\uff09\" href=\"http:\/\/zh.wikipedia.org\/w\/index.php?title=Sodipodi&amp;action=edit&amp;redlink=1\">Sodipodi<\/a>\u7b49\u3002<\/li>\n<li>\u5b9e\u9645\u4e0a\uff0cSVG\u6280\u672f\u672c\u8eab\u7684\u52a8\u6001\u90e8\u5206\uff08\u5305\u62ec\u65f6\u5e8f\u63a7\u5236\u548c\u52a8\u753b\uff09\u5c31\u662f\u57fa\u4e8e<a title=\"\u540c\u6b65\u591a\u5a92\u4f53\u96c6\u6210\u8bed\u8a00\" href=\"http:\/\/zh.wikipedia.org\/wiki\/%E5%90%8C%E6%AD%A5%E5%A4%9A%E5%AA%92%E4%BD%93%E9%9B%86%E6%88%90%E8%AF%AD%E8%A8%80\">SMIL<\/a>\u6807\u51c6\u3002SVG\u6587\u4ef6\u8fd8\u53ef\u5d4c\u5165<a title=\"JavaScript\" href=\"http:\/\/zh.wikipedia.org\/wiki\/JavaScript\">JavaScript<\/a>\uff08\u4e25\u683c\u5730\u8bf4\uff0c\u5e94\u8be5\u662f<a title=\"ECMAScript\" href=\"http:\/\/zh.wikipedia.org\/wiki\/ECMAScript\">ECMAScript<\/a>\uff09\u811a\u672c\u6765\u63a7\u5236SVG\u5bf9\u8c61\u3002\u6240\u4ee5\u53ef\u4ee5\u4f7f\u7528\u539f\u751fJS\u6216\u8005\u50cfd3.js\u8fd9\u6837\u5c01\u88c5\u8fc7\u7684js\u7c7b\u5e93\u6765\u63a7\u5236SVG\uff0c\u6548\u7387\u5f88\u9ad8\u3002<\/li>\n<li>\u7279\u522b\u8bf4\u660e\uff1a<strong>\u5bf9SVG\u7684dom\u5143\u7d20\u4f7f\u7528jquery\u8fdb\u884c\u76f4\u63a5\u7684\u589e\u5220\u6539\u64cd\u4f5c\u662f\u4e0d\u884c\u7684<\/strong>\uff0c\u6bd5\u7adfjquery\u7684\u8bbe\u8ba1\u521d\u8877\u5c31\u4e0d\u50cfd3\u90a3\u6837\u4e3a\u4e86\u64cd\u4f5cSVG\u800c\u751f\u3002\u5982\u679c\u4e00\u5b9a\u8981\u7528jquery\uff0c\u4e0b\u8f7d\u8fd9\u4e2ajquery\u00a0<a href=\"http:\/\/keith-wood.name\/svg.html\">SVG\u63a7\u5236\u63d2\u4ef6<\/a>\u5373\u53ef\u3002<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>\u4e09.SVG\u4e0ehtml\u7684\u5171\u540c\u4f7f\u7528<\/h2>\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014<\/p>\n<p>\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e2d\uff0cSVG\u4e0ehtml\u662f\u5e76\u884c\u4e0d\u6096\u7684\u3002\u901a\u5e38\u6211\u4eec\u662f\u5728\u4e00\u4e2ahtml\u9875\u9762\u4e2d\uff0c\u5d4c\u5165\u4e00\u7ec4svg\u5143\u7d20\u6765\u8868\u73b0\u77e2\u91cf\u5185\u5bb9\u3002\u4f46\u662f\uff0c\u8003\u8651\u5230\u6709\u4e9b\u4ea4\u4e92\u64cd\u4f5c\u7684\u590d\u6742\u6027\uff0c\u6211\u4eec\u6709\u53ef\u80fd\u9700\u8981\u5728SVG\u5143\u7d20\u4e2d\u518d\u663e\u793a\u4e00\u4e9bdiv\u4e4b\u7c7b\u7684html\u6807\u7b7e\u3002\u4f46\u662f\u9057\u61be\u7684\u662f\uff0c\u76f4\u63a5\u8fd9\u6837\u505a\u7684\u7ed3\u679c\u662f\u8fd9\u4e9b\u5d4c\u5165\u7684html\u6807\u7b7e\u4e0d\u4f1a\u663e\u793a\u3002\u8fd9\u662f\u4f7f\u7528SVG\u5236\u4f5c\u4ea4\u4e92\u56fe\u8868\u65f6\u7ecf\u5e38\u9047\u5230\u7684\u95ee\u9898\u3002\u6709\u4e24\u4e2a\u89e3\u51b3\u529e\u6cd5\uff1a<\/p>\n<p>1.\u5c06div\u4f7f\u7528SVG\u5143\u7d20foreignObject\u5305\u88f9\u3002\u8be6\u89c1\uff1ahttp:\/\/ajaxian.com\/archives\/foreignobject-hey-youve-got-html-in-my-svg\u3002\u4f46\u662fIE\u7684\u4efb\u4f55\u7248\u672c\u90fd\u4e0d\u652f\u6301foreignObject\uff01\u5305\u62ec\u65b0\u51fa\u7684IE11\uff01\u5fae\u8f6f\u4f60\u8fd8\u8981\u7978\u5bb3\u5230\u4ec0\u4e48\u65f6\u5019\uff01<\/p>\n<p>2.\u5c06div\u5b9a\u4e49\u4e3a\u6d6e\u52a8\u5c42\uff0c\u7136\u540e\u4f7f\u7528left, top\u7b49\u5c5e\u6027\u8ba1\u7b97\u4f4d\u7f6e\uff0c\u6d6e\u52a8\u663e\u793a\u5728SVG\u56fe\u5f62\u4e4b\u4e0a\u3002\u8fd9\u662f\u8f83\u4e3a\u5e38\u7528\u7684\u65b9\u6cd5\uff0c\u56e0\u4e3ad3\u4e5f\u53ef\u4ee5\u540c\u65f6\u63a7\u5236html\u5143\u7d20\uff0c\u800c\u52a8\u753b\u6548\u679c\u53ef\u4ee5\u901a\u8fc7css3\u6765\u89e3\u51b3\uff0c\u4e0d\u4f1a\u6709\u4ec0\u4e48\u517c\u5bb9\u6027\u95ee\u9898\u3002\u8be6\u89c1\u6211\u4e4b\u524d\u7684\u6587\u7ae0\uff1a<a href=\"http:\/\/www.storagelab.org.cn\/zhangdi\/2014\/08\/03\/svg%E6%96%87%E5%AD%97%E4%BA%A4%E4%BA%92%E5%8C%BA%E5%9F%9F%E7%9A%84%E5%88%B6%E4%BD%9C%E6%B3%A8%E6%84%8F%EF%BC%9Ahtml-object-in-svg\/\">SVG\u6587\u5b57\u4ea4\u4e92\u533a\u57df\u7684\u5236\u4f5c\u6ce8\u610f\uff1ahtml object in SVG<\/a><\/p>\n<h2>\u56db.CSS\u4e0eSVG<\/h2>\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014<\/p>\n<p>\u8fd9\u91cc\u6211\u6709\u5fc5\u8981\u5bf9\u517c\u5bb9\u6027\u8fd8\u6709\u7591\u8651\u7684\u7ae5\u978b\u8bf4\u4e00\u53e5\uff0c\u65e2\u7136\u5df2\u7ecf\u559d\u4e86\u6bd2\u836f\uff0c\u90a3\u4e48\u5c31\u628a\u76d8\u5b50\u8214\u5e72\u51c0\u5427\uff01<strong>\u65e2\u7136\u5df2\u7ecf\u7528\u4e86SVG\uff0c\u90a3\u4e48\u5c31\u53ef\u4ee5\u653e\u5fc3\u5730\u7528CSS3\u4e86<\/strong>\u3002\u56e0\u4e3a\u4f46\u51e1\u652f\u6301SVG\u90fd\u662f\u73b0\u4ee3\u6d4f\u89c8\u5668\uff0c\u73b0\u4ee3\u6d4f\u89c8\u5668\u53c8\u57fa\u672c\u652f\u6301CSS3\uff0c\u6240\u4ee5\u4e3a\u4ec0\u4e48\u4e0d\u7528\u5462\uff1f\u8ba9\u90a3\u4e9bCSS3\u52a8\u753b\u6548\u679c\uff0c\u9634\u5f71\u6548\u679c\uff0c\u5706\u89d2\u4ec0\u4e48\u7684\u6765\u5f97\u66f4\u731b\u70c8\u4e9b\u5427\uff01<\/p>\n<p>\u5fc5\u987b\u6307\u51fa\u7684\u662f\uff0cCSS3\u7684\u6807\u51c6\u6307\u5b9a\uff0c\u5927\u5e45\u5ea6\u5730\u53c2\u8003\u4e86SVG\u3002\u5c24\u5176\u662fCSS3\u7684\u53d8\u5f62\u548c\u52a8\u753b\u6548\u679c\uff0c\u54b1\u4eec\u53ef\u4ee5\u5bf9\u6bd4\u4e00\u4e0b<a href=\"http:\/\/www.w3school.com.cn\/css3\/css3_animation.asp\">CSS3\u7684\u5199\u6cd5<\/a>\u548c<a href=\"http:\/\/www.hongkiat.com\/blog\/tag\/scalable-vector-graphics\/\">SVG\u7684\u5199\u6cd5<\/a>\uff0c\u7b80\u76f4\u662f\u4e00\u6a21\u4e00\u6837\u554a\uff01\u6240\u4ee5\u5728\u4f7f\u7528SVG\u5236\u4f5c\u56fe\u8868\u65f6\uff0c\u53ef\u4ee5\u5927\u80c6\u5730\u4f7f\u7528css3\u52a8\u753b\u6548\u679c\u53bb\u5904\u7406html\u5143\u7d20\u3002\u5f53\u7136\uff0c\u7531\u4e8e\u4e00\u4e9bcss3\u6548\u679c\u5728\u4e0d\u540c\u6d4f\u89c8\u5668\u91cc\u652f\u6301\u60c5\u51b5\u4e0d\u540c\uff0c\u6240\u4ee5\u5bf9\u4e8e\u4e00\u4e9b\u652f\u6301\u60c5\u51b5\u4e0d\u592a\u597d\u7684\u6548\u679c\uff0c\u6bd4\u5982\u53d8\u5f62\uff0c\u8fd8\u662f\u5f97\u540c\u4e00\u4e2a\u5c5e\u6027\u4e00\u53e3\u6c14\u51995\u4e2a\u5e26\u524d\u7f00\u7684\u8bed\u53e5\uff0c\u6765\u4fdd\u8bc1\u517c\u5bb9\u6027\uff0c\u5c31\u50cf\u4e0b\u9762\u8fd9\u6837\uff08\u8fd9\u4e2a\u7a0b\u5e8f\u91cc\u6211\u4eec\u7528d3\u6765\u8fdb\u884cdiv\u7684\u653e\u5927\u7f29\u5c0f\uff0c\u5b9e\u9645\u4e0a\u7528\u7684\u662f\u64cd\u7eb5CSS3\u6765\u5904\u7406\uff09\uff1a<\/p>\n<pre class=\"lang:css decode:true\">d3.select(\"div\").style({\n\t\"transform\":         \"scale(\" + config.scale + \")\",\n\t\"-webkit-transform\": \"scale(\" + config.scale + \")\",\n\t\"-moz-transform\":    \"scale(\" + config.scale + \")\",\n\t\"-o-transform\":      \"scale(\" + config.scale + \")\",\n\t\"-ms-transform\":     \"scale(\" + config.scale + \")\"\n})<\/pre>\n<p>\u8fd8\u6709\u4e00\u70b9\u8981\u6307\u51fa\u7684\u662f\uff0cSVG\u5143\u7d20\u5f53\u7136\u4e5f\u53ef\u4ee5\u7528css\u6765\u6307\u5b9a\u6837\u5f0f\u3002\u4f8b\u5982\u505aSVG\u5143\u7d20\u8282\u70b9\u7684\u70b9\u51fb\u6548\u679c\uff0c\u4f60\u4e5f\u53ef\u4ee5\u5199d3.select(&#8220;.path&#8221;).class(&#8220;active&#8221;, true),\u7ed9path\u8d4b\u4e88\u4e00\u4e2a\u540d\u4e3aactive\u7684css\u7c7b\uff0c\u7136\u540e\u628a\u6837\u5f0f\u5199css\u91cc\u3002\u5f53\u7136\uff0ccss\u91cc\u5f97\u5199SVG\u7684\u90a3\u4e9b\u5c5e\u6027\uff0c\u4f8b\u5982\u586b\u5145\u662ffill,\u8fb9\u6846\u662fstroke\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i587.photobucket.com\/albums\/ss314\/zhangdiwaa\/my%20blog%20photo\/800px-Mahurisvg.png\" alt=\"\" width=\"480\" height=\"553\" \/><\/p>\n<p>\u4f7f\u7528svg\u7f16\u8f91\u8f6f\u4ef6\u753b\u7684\u59b9\u5b50\uff0c\u8fd8\u7b49\u4ec0\u4e48\u5feb\u6765\u4f7f\u7528svg\u5427\uff01\uff08\u6458\u81eawikipedia\uff09<\/p>\n<div id=\"crayon-53f0ad645f709656524192\"><\/div>\n<div><\/div>\n<h2><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>\u5173\u4e8eD3.js\uff0c\u6211\u539f\u8ba1\u5212\u76f4\u5148\u4ee5\u5176\u6838\u5fc3\u5185\u5bb9<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[27,28,110,163],"class_list":["post-1023","post","type-post","status-publish","format-standard","hentry","category-data-visualization","tag-d3js","tag-d3","tag-110","tag-163"],"_links":{"self":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/posts\/1023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1023"}],"version-history":[{"count":0,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/posts\/1023\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.divis.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}