MediaWiki API 結果
這是JSON格式的HTML實現。HTML對除錯很有用，但不適合應用程式使用。
指定format參數以更改輸出格式。要查看JSON格式的非HTML實現，設置format=json。
{
"batchcomplete": "",
"continue": {
"gapcontinue": "Wiki_\u5165\u9580\u8a9e\u6cd5",
"continue": "gapcontinue||"
},
"warnings": {
"main": {
"*": "Subscribe to the mediawiki-api-announce mailing list at <https://lists.wikimedia.org/mailman/listinfo/mediawiki-api-announce> for notice of API deprecations and breaking changes."
},
"revisions": {
"*": "Because \"rvslots\" was not specified, a legacy format has been used for the output. This format is deprecated, and in the future the new format will always be used."
}
},
"query": {
"pages": {
"168": {
"pageid": 168,
"ns": 0,
"title": "SVG\u52d5\u756b\u9032\u968e\u4f7f\u7528",
"revisions": [
{
"contentformat": "text/x-wiki",
"contentmodel": "wikitext",
"*": "\n===\u7fa4\u7d44===\n*\u4e0a\u9762\u7684\u6587\u5b57\u8207\u65b9\u584a\u5df2\u7d93\u7b97\u662f\u4e00\u500b\u7fa4\u7d44\u4e86\uff0c\u63a5\u4e0b\u4f86\u53ef\u4ee5\u5728<g>\u9019\u500b\u5143\u7d20\uff0c\u4f7f\u7528\u8b8a\u5f62(transform)\u4f86\u4e00\u8d77\u6539\u8b8a\u5916\u89c0\n*\u5c31\u7b97\u6709\u8a2d\u5b9a<g>\u7684x,y\u503c\uff0c\u4f46\u5c31\u662f\u5b8c\u5168\u6c92\u6709\u53cd\u61c9\uff0c\u5982\u679c\u8981\u63a7\u5236<g>\u7684\u4f4d\u7f6e\uff0c\u5c31\u8981\u7528transform\u4e86\u3002\n*\u5229\u7528transform=\u201dtranslate(40 20)\u201d\uff0c\u5c31\u53ef\u4ee5\u4f4d\u79fb\u4e86\uff0c\u9019\u7528\u6cd5\u548cCSS3 transform\u76f8\u7576\u63a5\u8fd1\uff0c\u96d6\u7136\u985e\u4f3cx,y\u4f46\u672c\u8cea\u4e0a\u9084\u662f\u6709\u6240\u4e0d\u540c\u3002\n <svg width=\"100%\" height=\"150\">\n <g transform=\"rotate(-10)\">\n <rect y=\"10\" width=\"100\" height=\"100\" style=\"stroke: #777; stroke-width: 3; fill: #07B492;\"/>\n <text x=\"0\" y=\"130\" style=\"stroke: pink; fill: white\"> SVG</text>\n </g>\n </svg>\n*\u50cf\u4ee5\u4e0a\u9019\u6a23\uff0c<g>\u7fa4\u7d44\u5c31\u6703\u88ab\u65cb\u8f49(-10 deg)\u3002\n*\u5728G\u88e1\u9762\u7684\u5143\u7d20\uff0c\u90fd\u6703\u88ab\u5916\u5c64<g>\u6240\u8a2d\u5b9a\u7684\u6a23\u5f0f\u5f71\u97ff\uff0c\u50cf\u4ee5\u4e0b\u5167\u90e8\u7684\u5143\u7d20\u6c92\u6709\u8a2d\u5b9a\u5916\u6846\uff0c\u4f46\u537b\u53ef\u4ee5\u7e7c\u627f\u5176\u7236\u5c64\u7684<g>\u6a23\u5f0f\u3002\n*\u4e5f\u5c31\u50cfCSS\u4e00\u6a23\uff0c\u5982\u679c\u5b50\u5143\u7d20\u6709\u8a2d\u5b9a\uff0c\u5247\u5b50\u5143\u7d20\u512a\u5148\u3002\n <svg width=\"100%\" height=\"150\">\n <g style=\"stroke: pink; stroke-width: 5px\">\n <circle cx=\"40\" cy=\"35\" r=\"30\" style=\"fill: white;\"/>\n <circle cx=\"120\" cy=\"35\" r=\"30\" style=\"fill: white;\"/>\n <rect x=\"160\" y=\"5\" width=\"40\" height=\"40\" style=\"fill: white;\"/>\n <rect x=\"220\" y=\"5\" width=\"40\" height=\"40\" style=\"fill: red;\"/>\n </g>\n </svg>\n\u4e0d\u904e\u6211\u6c92\u60f3\u5230\u7684\u662f\uff0csvg\u9084\u53ef\u4ee5\u9019\u6a23\u7528\uff0c\u5728<g>\u88e1\u9762\u518d\u653e\u4e00\u500b<svg>\uff0c\u9019\u6a23\u5c31\u53ef\u4ee5\u8a2d\u5b9a\u4ed6\u7684x,y\uff0c\u9019\u62db\u592a\u7d55\u4e86\uff0c\u9019\u6a23\u5c31\u53ef\u4ee5\u907f\u514d\u4f7f\u7528translate\uff0c\u4f7f\u7528x,y\u4f86\u8a2d\u5b9a\u4f4d\u7f6e\u3002\n <svg width=\"100%\" height=\"150\">\n <g>\n <svg x=\"40\" y=\"20\">\n <rect y=\"10\" width=\"100\" height=\"100\" style=\"stroke: #777; stroke-width: 3; fill: #07B492;\"/>\n <text x=\"0\" y=\"130\" style=\"stroke: pink; fill: white\"> SVG</text>\n </svg>\n </g>\n </svg>\n\n===\u5b9a\u7fa9\u4e00\u6b21\uff0c\u5f15\u7528\u591a\u6b21===\n*defs \u9867\u540d\u601d\u7fa9\u5c31\u662f\u300cdefinitions\u300d\uff1a\u5b9a\u7fa9\uff0c\u6211\u5011\u53ef\u4ee5\u628a\u8a31\u591a\u91cd\u8907\u6027\u8cea\u9ad8\u7684\u5143\u7d20\uff0c\u653e\u5165 defs \u5143\u7d20\u5167\uff0c\u8b93\u5b83\u8b8a\u6210\u4e00\u500b\u53ef\u4ee5\u91cd\u8907\u5229\u7528\u7684\u7269\u4ef6\uff0c\u539f\u7406\u5c31\u6709\u9ede\u985e\u4f3c\u7576\u5e74 flash \u88cf\u982d\u628a\u4e00\u4e9b\u52d5\u756b\u6216\u662f\u5716\u6848\u8f49\u63db\u6210\u7269\u4ef6\u4e00\u6a23\uff1b\u9996\u5148\u6211\u5011\u4f86\u770b\u5230\u6700\u5e38\u898b\u7684 defs \u4f8b\u5b50\uff1a\u300c\u91cd\u8907\u7684\u5716\u5f62\u300d\uff0c\u4e0b\u9762\u5229\u7528 defs \u5b9a\u7fa9\u4e86\u4e00\u500b\u77e9\u5f62\u7684\u9577\u5bec\u984f\u8272\uff0c\u518d\u4f7f\u7528 use \u5143\u7d20\u628a\u77e9\u5f62\u8868\u73fe\u5728\u756b\u9762\u4e0a\uff0c\u800c use \u5143\u7d20\u5177\u6709 x \u8207 y \u7684\u5ea7\u6a19\u5c6c\u6027\uff0c\u5c31\u53ef\u4ee5\u8f15\u9b06\u7684\u505a\u51fa\u8a31\u591a\u4e0d\u540c\u4f4d\u7f6e\u7684\u77e9\u5f62\u3002\n <defs>\n <rect id=\"rect1\" width=\"100\" height=\"50\" x=\"10\" y=\"10\" fill=\"#c00\"/>\n </defs>\n <use xlink:href=\"#rect1\"/>\n <use xlink:href=\"#rect1\" x=\"110\"/>\n\u4e5f\u53ef\u4ee5\u5c07 g \u5143\u7d20 ( \u7fa4\u7d44 ) \u653e\u5728 defs \u5143\u7d20\u88cf\u982d\uff1a\n <defs>\n <g id=\"g1\">\n <rect id=\"rect1\" width=\"100\" height=\"50\" x=\"10\" y=\"10\" fill=\"#c00\"/>\n <circle id=\"circle1\" cx=\"30\" cy=\"30\" r=\"10\" fill=\"#00c\"/>\n </g>\n </defs>\n <use xlink:href=\"#g1\"/>\n <use xlink:href=\"#rect1\" x=\"110\"/>\n <use xlink:href=\"#circle1\" x=\"210\"/>\n\u5b9a\u7fa9\u6f38\u5c64\u8272\n <defs>\n <linearGradient id=\"a1\">\n <stop offset=\"5%\" stop-color=\"#F00\" />\n <stop offset=\"95%\" stop-color=\"#ff0\" />\n </linearGradient>\n </defs>\n <rect x=\"50\" y=\"250\" width=\"100\" height=\"100\" stroke=\"#000\" stroke-width=\"5\" fill=\"url(#a1)\"></rect>\n <circle cx=\"220\" cy=\"300\" r=\"50\" stroke=\"#000\" stroke-width=\"5\" fill=\"url(#a1)\"></circle>\n <rect x=\"290\" y=\"250\" width=\"100\" height=\"100\" stroke=\"url(#a1)\" stroke-width=\"5\" fill=\"none\"></rect>\n\u6587\u5b57\u8def\u5f91(\u5148\u628a\u8c9d\u8332\u66f2\u7dda\u5b9a\u7fa9\u597d\uff0c\u518d\u628a\u6587\u5b57\u5957\u5165)\n <defs>\n <path id=\"a1\" d=\"M0 50 C150 150 100 -50 300 50\" stroke=\"#000\" fill=\"none\"/>\n </defs>\n <text>\n <textPath xlink:href=\"#a1\">\u9019\u662f\u96a8\u8457\u8def\u5f91\u8dd1\u7684\u6587\u5b57\n </textPath>\n </text>\n\u4f7f\u7528 defs \u5b9a\u7fa9 filter(\u628a\u6f38\u5c64\u6216\u6ffe\u93e1\u8b8a\u70baID\u5c31\u80fd\u653e\u9032\u77e9\u5f62\u3001\u5713\u5f62\u7b49\u7b49\u5716\u5f62\u4e2d)\n <defs>\n <filter width=\"200\" height=\"200\" x=\"0\" y=\"0\" id=\"blur\" filterUnits=\"userSpaceOnUse\">\n <feGaussianBlur stdDeviation=\"5\" />\n </filter>\n </defs>\n <rect x=\"30\" y=\"30\" width=\"70\" height=\"70\" fill=\"#a00\" filter=url(\"#blur\") />\n\n\u4e00\u6735\u82b1\u7684\u7a0b\u5f0f\u78bc\n\n <rect x=\"95\" y=\"100\" style=\"width:10;height:200;fill:green;\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(45 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(90 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(135 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(180 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(225 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(270 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <polygon points=\"100,110 120,20 100,10 80,20\" transform=\"rotate(315 100 100 )\" stroke=\"yellow\" stroke-width=\"1\" fill=\"#00a0e9\"/>\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#FF8000\"/>\n <circle cx=\"85\" cy=\"85\" r=\"4\" fill=\"blac k\"/>\n <circle cx=\"115\" cy=\"85\" r=\"4\" fill=\"black\"/>\n <circle cx=\"100\" cy=\"100\" r=\"4\" fill=\"black\"/>\n <path d=\"M 85,130 Q 100,145 115,130\" style=\"stroke:black;fill:none;\"/>\n\n\n\n**\u82b1\u74e3\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E8%8A%B1%E6%9C%B5.svg' />\n\n===\u6f38\u5c64===\n\u6f38\u5c64\u7684\u985e\u578b\u6709\u5169\u7a2e\uff0c\u7dda\u5f62\u6f38\u5c64\u548c\u653e\u5c04\u5f62\u6f38\u5c64\u3002\u7dda\u5f62\u6f38\u5c64\u6cbf\u76f4\u7dda\u8b8a\u5316\uff0c\u5728 defs\u5143\u7d20\u88e1\u5275\u5efa\u4e00\u500b <linearGradient> \u5143\u7d20\uff0c\u5c31\u5275\u5efa\u4e86\u4e00\u500b\u7dda\u5f62\u6f38\u5c64\u3002\u6f38\u8b8a\u5fc5\u9808\u6709\u4e00\u500bid\u5c6c\u6027\uff0c\u5426\u5247\u5b83\u4e0d\u80fd\u88ab\u5176\u4ed6\u5143\u7d20\u5f15\u7528\uff0c\u7b49\u65bc\u767d\u505a\u4e86\u3002\n*\u6f38\u5c64\u7531\u4e00\u7a2e\u4ee5\u4e0a\u7684\u984f\u8272\u6240\u7d44\u6210\uff0c\u7531\u4e00\u7a2e\u984f\u8272\u6162\u6162\u8f49\u6210\u53e6\u4e00\u7a2e\u984f\u8272\uff0c\u8a2d\u5b9a\u597d\u984f\u8272\u4e4b\u5f8c\uff0c\u518d\u4ee5ID\u7684\u5f62\u5f0f\u7d66\u6f38\u5c64\u3002\n*\u6f38\u5c64(\u53c8\u7a31\u70ba\u300c\u6f38\u8b8a\u300d)\u662f\u6307\u5c07\u69cb\u6210\u5143\u7d20\u7684\u5f62\u72c0\u6216\u8272\u5f69\u505a\u6b21\u7b2c\u6539\u8b8a\u7684\u5c64\u5c64\u8b8a\u5316\u3002\u4f8b\u5982\uff0c\u540c\u4e00\u7a2e\u5f62\u72c0\u7684\u6f38\u5927\u6216\u6f38\u5c0f\u3001\u540c\u4e00\u7a2e\u8272\u5f69\u7684\u6f38\u6fc3\u6216\u6f38\u6de1\uff0c\u5747\u5c6c\u65bc\u6f38\u5c64\u7684\u5f62\u5f0f\u8b8a\u5316\uff0c\u800c\u5728\u9019\u4e9b\u6f38\u589e\u6216\u6f38\u6e1b\u7684\u5c64\u6b21\u8b8a\u5316\u4e2d\uff0c\u5373\u80fd\u5177\u73fe\u51fa\u6f38\u5c64\u7684\u7f8e\u611f\u3002\n*\u6f38\u8b8a\u7684\u57fa\u672c\u539f\u7406\u8207\u53cd\u8986\u76f8\u985e\u4f3c\uff0c\u4f46\u7531\u65bc\u5176\u4e2d\u6216\u5f62\u6216\u8272\u7684\u6f38\u6b21\u6539\u8b8a\uff0c\u4f7f\u5f97\u756b\u9762\u8f03\u5177\u6d3b\u6f51\u6027\uff0c\u4e88\u4eba\u751f\u52d5\u8f15\u5feb\u7684\u611f\u53d7\u3002\u4e2d\u570b\u5efa\u7bc9\u4e2d\u7684\u5bf6\u5854\uff1b\u6a02\u66f2\u4e2d\u97f3\u91cf\u7684\u6f38\u5f37\u6f38\u5f31\uff1b\u6587\u5b78\u5c0f\u8aaa\u4e2d\u60c5\u7bc0\u9ad8\u6f6e\u7684\u5806\u4e14\uff1b\u5927\u6703\u821e\u968a\u578b\u7684\u6f38\u6b21\u7e2e\u5c0f\u6216\u64f4\u5927\u2026\u2026\u7b49\uff0c\u90fd\u662f\u6f38\u5c64\u5f62\u5f0f\u539f\u7406\u7684\u4f8b\u5b50\u3002\n====(\u4e00)\u7dda\u6027\u6f38\u5c64====\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u88e1\uff0c\u4e00\u500b\u7dda\u5f62\u6f38\u5c64\u88ab\u7528\u5728<rect>\u5143\u7d20\u4e0a\uff0c\u7dda\u5f62\u6f38\u5c64\u5167\u90e8\u6709\u82e5\u5e72 <stop> \u7bc0\u9ede\uff0c\u5b83\u5011\u7528\u4f86\u6307\u5b9a\u6f38\u8b8a\u61c9\u8a72\u5728\u4ec0\u9ebc\u4f4d\u7f6e\u5f62\u6210\u4ec0\u9ebc\u984f\u8272\uff0c\u5176\u4e2d\u5169\u500b\u5c6c\u6027\u5206\u5225\u662f\uff1a\u5b9a\u7fa9\u504f\u79fb\u4f4d\u7f6e\u7684offset\u5c6c\u6027\u548c\u5b9a\u7fa9\u984f\u8272\u7684stop-color\u5c6c\u6027\u3002\u53e6\u5916\uff0c\u5b83\u5011\u53ef\u4ee5\u76f4\u63a5\u8a2d\u7f6e\uff0c\u6216\u901a\u904eCSS\u8a2d\u7f6e\u3002\u4e0a\u9762\u7684\u4f8b\u5b50\u88e1\u6df7\u5408\u4f7f\u7528\u4e86\u9019\u5169\u7a2e\u5f62\u5f0f\u3002\u6bd4\u5982\uff0c\u9019\u500b\u4f8b\u5b50\u7684\u6f38\u8b8a\u662f\u5f9e\u7d05\u8272\u958b\u59cb\uff0c\u5230\u4e2d\u9593\u6f38\u8b8a\u6210\u9ed1\u8272\uff0c\u6700\u5f8c\u6f38\u8b8a\u5230\u85cd\u8272\u3002\u4f60\u53ef\u4ee5\u6309\u7167\u81ea\u5df1\u7684\u60f3\u6cd5\u8a2d\u7f6e\u5404\u7a2estop-color\uff0c\u4f46\u662f\u5b83\u5011\u7684offset\u5fc5\u9808\u662f\u5f9e0%\u9010\u6f38\u63d0\u9ad8\u5230100%\u3002\uff08\u5982\u679c\u4e0d\u52a0%\uff0c\u5c31\u662f0-1\uff09\u3002\u5982\u679c\u6709\u91cd\u8907\u7684\u503c\uff0c\u4e0d\u6703\u88ab\u5206\u914d\u5230xml\u6a39\u7684\u6700\u5f8c\u3002\u53e6\u5916\u50cffill\u548cstroke\u4e00\u6a23\uff0c\u4f60\u4e5f\u53ef\u4ee5\u8a2d\u7f6e\u4e00\u500bstop-opacity\u5c6c\u6027\u8868\u793a\u900f\u660e\u5ea6\u3002\n\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/t.svg' />\n <?xml version=\"1.0\" standalone=\"no\"?>\n <svg width=\"120\" height=\"240\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"Gradient1\">\n <stop class=\"stop1\" offset=\"0%\"/>\n <stop class=\"stop2\" offset=\"50%\"/>\n <stop class=\"stop3\" offset=\"100%\"/>\n </linearGradient>\n <linearGradient id=\"Gradient2\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"red\"/>\n <stop offset=\"50%\" stop-color=\"black\" stop-opacity=\"0\"/>\n <stop offset=\"100%\" stop-color=\"blue\"/>\n </linearGradient>\n <style type=\"text/css\"><![CDATA[\n #rect1 { fill: url(#Gradient1); }\n .stop1 { stop-color: red; }\n .stop2 { stop-color: black; stop-opacity: 0; }\n .stop3 { stop-color: blue; }\n ]]></style>\n </defs>\n \n <rect id=\"rect1\" x=\"10\" y=\"10\" rx=\"15\" ry=\"15\" width=\"100\" height=\"100\"/>\n <rect x=\"10\" y=\"120\" rx=\"15\" ry=\"15\" width=\"100\" height=\"100\" fill=\"url(#Gradient2)\"/>\n \n </svg>\n*\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u88e1\uff0c\u4e00\u500b\u7dda\u5f62\u6f38\u5c64\u88ab\u7528\u5728<rect>\u5143\u7d20\u4e0a\uff0c\u7dda\u5f62\u6f38\u5c64\u5167\u90e8\u6709\u82e5\u5e72 <stop> \u7bc0\u9ede\uff0c\u5b83\u5011\u7528\u4f86\u6307\u5b9a\u6f38\u8b8a\u61c9\u8a72\u5728\u4ec0\u9ebc\u4f4d\u7f6e\u5f62\u6210\u4ec0\u9ebc\u984f\u8272\uff0c\u5176\u4e2d\u5169\u500b\u5c6c\u6027\u5206\u5225\u662f\uff1a\u5b9a\u7fa9\u504f\u79fb\u4f4d\u7f6e\u7684offset\u5c6c\u6027\u548c\u5b9a\u7fa9\u984f\u8272\u7684stop-color\u5c6c\u6027\u3002\u53e6\u5916\uff0c\u5b83\u5011\u53ef\u4ee5\u76f4\u63a5\u8a2d\u7f6e\uff0c\u6216\u901a\u904eCSS\u8a2d\u7f6e\u3002\u4e0a\u9762\u7684\u4f8b\u5b50\u88e1\u6df7\u5408\u4f7f\u7528\u4e86\u9019\u5169\u7a2e\u5f62\u5f0f\u3002\u6bd4\u5982\uff0c\u9019\u500b\u4f8b\u5b50\u7684\u6f38\u8b8a\u662f\u5f9e\u7d05\u8272\u958b\u59cb\uff0c\u5230\u4e2d\u9593\u6f38\u8b8a\u6210\u9ed1\u8272\uff0c\u6700\u5f8c\u6f38\u8b8a\u5230\u85cd\u8272\u3002\u4f60\u53ef\u4ee5\u6309\u7167\u81ea\u5df1\u7684\u60f3\u6cd5\u8a2d\u7f6e\u5404\u7a2estop-color\uff0c\u4f46\u662f\u5b83\u5011\u7684offset\u5fc5\u9808\u662f\u5f9e0%\u9010\u6f38\u63d0\u9ad8\u5230100%\u3002\uff08\u5982\u679c\u4e0d\u52a0%\uff0c\u5c31\u662f0-1\uff09\u3002\u5982\u679c\u6709\u91cd\u8907\u7684\u503c\uff0c\u4e0d\u6703\u88ab\u5206\u914d\u5230xml\u6a39\u7684\u6700\u5f8c\u3002\u53e6\u5916\u50cffill\u548cstroke\u4e00\u6a23\uff0c\u4f60\u4e5f\u53ef\u4ee5\u8a2d\u7f6e\u4e00\u500bstop-opacity\u5c6c\u6027\u8868\u793a\u900f\u660e\u5ea6\u3002\n*\u4f7f\u7528\u6f38\u8b8a\u6642\uff0c\u6211\u5011\u9700\u8981\u5728\u5c0d\u8c61\u7684fill\u6216stroke\u5c6c\u6027\u88e1\u5f15\u7528\u5b83\u3002\u5c31\u50cf\u5728CSS\u91cc\u901a\u904eurl\u4f86\u5f15\u7528\u5176\u4ed6\u5143\u7d20\u4e00\u6a23\uff0c\u5728\u9019\u88e1\uff0curl\u5f15\u7528\u7684\u662f\u6211\u5011\u7d66\u6f38\u8b8a\u8a2d\u7f6e\u7684id\uff0c\u6240\u4ee5\u53ea\u9700\u8981\u5c07fill\u5c6c\u6027\u8a2d\u7f6e\u6210url(#Gradient) \uff0c\u6211\u5011\u7684\u5c0d\u8c61\u5c31\u53ef\u4ee5\u5448\u73fe\u51fa\u4e94\u5f69\u6591\u6595\u7684\u6548\u679c\u3002\u53e6\u5916\u4f60\u4e5f\u53ef\u4ee5\u7d66stroke\u9032\u884c\u540c\u6a23\u7684\u8a2d\u7f6e\u3002\n*<linearGradient>\u5143\u7d20\u9084\u53ef\u4ee5\u8a2d\u7f6e\u5176\u4ed6\u4e00\u4e9b\u5c6c\u6027\uff0c\u7528\u4f86\u5b9a\u7fa9\u5c3a\u5bf8\u548c\u6837\u200b\u200b\u5f0f\u3002\u6bd4\u5982\u6f38\u8b8a\u7684\u65b9\u5411\u662f\u7531\u5169\u500b\u9ede\u63a7\u5236\u7684\uff0c\u5b83\u5011\u7528x1\uff0c x2\uff0cy1\uff0cy2\u56db\u500b\u5c6c\u6027\u63a7\u5236\uff0c\u5f62\u6210\u4e00\u689d\u76f4\u7dda\uff0c\u6f38\u8b8a\u5c31\u6cbf\u9019\u689d\u76f4\u7dda\u8b8a\u5316\u3002\u6f38\u8b8a\u9ed8\u8a8d\u7684\u65b9\u5411\u662f\u6c34\u5e73\u65b9\u5411\uff0c\u4f7f\u7528\u9019\u4e9b\u5c6c\u6027\u5c31\u53ef\u4ee5\u6539\u8b8a\u65b9\u5411\u3002\u4e0a\u9762\u4f8b\u5b50\u88e1\u7684Gradient2\u5c31\u662f\u4e00\u500b\u5782\u76f4\u7684\u6f38\u8b8a\u3002\n\n====(\u4e8c)\u653e\u5c04\u6f38\u5c64====\n\u653e\u5c04\u5f62\u6f38\u5c64\u5f88\u985e\u4f3c\u7dda\u5f62\u6f38\u5c64\uff0c\u53ea\u4e0d\u904e\u662f\u5f9e\u4e00\u500b\u9ede\u5411\u5916\u767c\u6563\u6f38\u8b8a\u3002\u5728\u6587\u6a94\u7684 defs \u6bb5\u843d\u88e1\u589e\u52a0\u4e00\u500b <radialGradient> \u5143\u7d20\uff0c\u5c31\u53ef\u4ee5\u5275\u5efa\u653e\u5c04\u5f62\u6f38\u5c64\u3002\n <?xml version=\"1.0\" standalone=\"no\"?>\n \n <svg width=\"120\" height=\"240\" version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient id=\"Gradient1\">\n <stop offset=\"0%\" stop-color=\"red\"/>\n <stop offset=\"100%\" stop-color=\"blue\"/>\n </radialGradient>\n <radialGradient id=\"Gradient2\" cx=\"0.25\" cy=\"0.25\" r=\"0.25\">\n <stop offset=\"0%\" stop-color=\"red\"/>\n <stop offset=\"100%\" stop-color=\"blue\"/>\n </radialGradient>\n </defs>\n \n <rect x=\"10\" y=\"10\" rx=\"15\" ry=\"15\" width=\"100\" height=\"100\" fill=\"url(#Gradient1)\"/>\n <rect x=\"10\" y=\"120\" rx=\"15\" ry=\"15\" width=\"100\" height=\"100\" fill=\"url(#Gradient2)\"/>\n \n </svg>\n*\u9019\u500b\u4f8b\u5b50\u7684\u88e1\uff0c\u653e\u5c04\u5f62\u6f38\u5c64\u4e2d\u7684stop\u7bc0\u9ede\u5728\u7528\u6cd5\u4e0a\u548c\u524d\u9762\u7684\u7dda\u5f62\u6f38\u5c64\u4e00\u6a23\uff0c\u4f46\u662f\u9019\u88e1\u7684\u5716\u5f62\u5c0d\u50cf\u662f\u4e2d\u9593\u5448\u7d05\u8272\uff0c\u7136\u5f8c\u5411\u5404\u500b\u65b9\u5411\u767c\u6563\u6f38\u8b8a\uff0c\u76f4\u5230\u908a\u7de3\u6f38\u8b8a\u5230\u85cd\u8272\u3002\u653e\u5c04\u5f62\u6f38\u5c64<radialGradient>\u4e5f\u6709\u82e5\u5e72\u7528\u4f86\u5b9a\u7fa9\u4f4d\u7f6e\u548c\u65b9\u5411\u7684\u5c6c\u6027\uff0c\u4e0d\u904e\u8207\u7dda\u5f62\u6f38\u5c64\u4e0d\u540c\uff0c\u9019\u88e1\u7684\u8a2d\u7f6e\u6703\u7a0d\u5fae\u8907\u96dc\u4e00\u9ede\u3002\u653e\u5c04\u5f62\u6f38\u5c64\u88e1\u4e5f\u53ef\u4ee5\u8a2d\u7f6e\u5169\u500b\u9ede\uff0c\u7528\u4f86\u78ba\u5b9a\u5b83\u7684\u7bc4\u570d\u3002\u7b2c\u4e00\u500b\u9ede\u7528\u4f86\u5b9a\u7fa9\u4e00\u500b\u74b0\uff0c\u9650\u5b9a\u6f38\u8b8a\u7684\u7bc4\u570d\u3002\u8a72\u9ede\u5305\u62ec\u5750\u6a19\u5c6c\u6027cx\u548ccy\uff0c\u4ee5\u53ca\u534a\u5f91\u5c6c\u6027r\u3002\u5b9a\u7fa9\u9019\u4e09\u500b\u5c6c\u6027\uff0c\u5c31\u53ef\u4ee5\u6539\u8b8a\u6f38\u8b8a\u7684\u4f4d\u7f6e\u548c\u5927\u5c0f\uff0c\u5c31\u50cf\u4e0a\u9762\u4f8b\u5b50\u88e1\u7684\u7b2c\u4e8c\u500b\u6f38\u8b8a\u6548\u679c\u3002\n*\u7b2c\u4e8c\u500b\u9ede\u88ab\u7a31\u70ba\u7126\u9ede\uff0c\u901a\u904e\u5750\u6a19\u5c6c\u6027fx\u548cfy\u4f86\u78ba\u5b9a\u3002\u7b2c\u4e00\u500b\u9ede\u6c7a\u5b9a\u7684\u662f\u6f38\u8b8a\u6240\u8655\u7684\u7bc4\u570d\uff0c\u800c\u7126\u9ede\u5247\u6c7a\u5b9a\u6f38\u8b8a\u7684\u4e2d\u5fc3\u3002\n\n <?xml version=\"1.0\" standalone=\"no\"?>\n \n <svg width=\"120\" height=\"120\" version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <radialGradient id=\"Gradient\"\n cx=\"0.5\" cy=\"0.5\" r=\"0.5\" fx=\"0.25\" fy=\"0.25\">\n <stop offset=\"0%\" stop-color=\"red\"/>\n <stop offset=\"100%\" stop-color=\"blue\"/>\n </radialGradient>\n </defs>\n \n <rect x=\"10\" y=\"10\" rx=\"15\" ry=\"15\" width=\"100\" height=\"100\"\n fill=\"url(#Gradient)\" stroke=\"b\u200b\u200black\" stroke-width=\"2\"/>\n\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"transparent\" stroke=\"white\" stroke-width=\"2\"/>\n <circle cx=\"35\" cy=\"35\" r=\"2\" fill=\"white\" stroke=\"white\"/>\n <circle cx=\"60\" cy=\"60\" r=\"2\" fill=\"white\" stroke=\"white\"/>\n <text x=\"38\" y=\"40\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">(fx,fy)</text>\n <text x=\"63\" y=\"63\" fill=\"white\" font-family=\"sans-serif\" font-size=\"10pt\">(cx,cy)</text>\n \n </svg>\n*\u5982\u679c\u7126\u9ede\u88ab\u79fb\u52d5\u5230\u6f38\u8b8a\u7bc4\u570d\u4e4b\u5916\uff0c\u6f38\u8b8a\u4e0d\u53ef\u80fd\u88ab\u6b63\u78ba\u6e32\u67d3\uff0c\u6240\u4ee5\u6703\u88ab\u91cd\u5b9a\u7fa9\u5230\u7bc4\u570d\u7684\u908a\u7de3\u3002\u5982\u679c\u4e0d\u5b9a\u7fa9\u7126\u9ede\uff0c\u5247\u9ed8\u8a8d\u8207\u6f38\u8b8a\u7bc4\u570d\u7684\u4e2d\u9ede\u662f\u540c\u4e00\u9ede\u3002\n\n*\u5169\u7a2e\u6f38\u8b8a\u90fd\u53ef\u4ee5\u901a\u904e\u4e00\u4e9b\u5c6c\u6027\uff0c\u5b9a\u7fa9\u8af8\u5982\u8b8a\u5f62\u7b49\u6a23\u5f0f\u3002\u5728\u9019\u88e1\u50c5\u63d0\u5176\u4e2d\u4e00\u500b\uff1aspreadMethod\u5c6c\u6027\u3002\u7576\u6f38\u8b8a\u5df2\u7d93\u5230\u9054\u7bc4\u570d\u908a\u7de3\uff0c\u4f46\u5716\u5f62\u5c0d\u50cf\u9084\u6c92\u88ab\u5b8c\u5168\u586b\u5145\u6642\uff0c\u9019\u4e00\u5c6c\u6027\u200b\u200b\u5c07\u6c7a\u5b9a\u63a5\u4e0b\u4f86\u6703\u767c\u751f\u4ec0\u9ebc\u3002\u5b83\u6709\u4e09\u500b\u53ef\u7528\u503c\uff0c\"pad\", \"reflect\", \u4ee5\u53ca \"repeat\"\u3002 \"pad\"\u7684\u6548\u679c\u4f60\u5df2\u7d93\u770b\u5230\u904e\u4e86\uff0c\u7576\u6f38\u8b8a\u5230\u9054\u7bc4\u570d\u908a\u7de3\uff0c\u6700\u5f8c\u4e00\u500b\u984f\u8272\u5c07\u7528\u4f86\u586b\u5145\u5716\u5f62\u5269\u4e0b\u7684\u5340\u57df\u3002 \"reflect\"\u662f\u7e7c\u7e8c\u6f38\u8b8a\uff0c\u4f46\u662f\u6703\u5f9e100%\u8655\u7684\u984f\u8272\u6f38\u8b8a\u67030%\u7684\u4f4d\u7f6e\uff0c\u7136\u5f8c\u518d\u7ffb\u904e\u4f86\u7e7c\u7e8c\u3002 \"Repeat\"\u4e5f\u662f\u8b93\u6f38\u8b8a\u7e7c\u7e8c\uff0c\u4e0d\u904e\u662f\u8df3\u904e\u8fd4\u56de\u7684\u904e\u7a0b\uff0c\u76f4\u63a5\u56de\u5230\u8d77\u59cb\u72c0\u614b\uff0c\u7136\u5f8c\u91cd\u65b0\u6f38\u8b8a\u3002\n*\u67d4\u7126\u6ffe\u93e1\u8207\u653e\u5c04\u6f38\u5c64\u7684\u7df4\u7fd2\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/sum'/>\n\n===\u67d4\u7126\u6ffe\u93e1===\nfeGaussianBlur(\u67d4\u7126\u6ffe\u93e1)\u61c9\u8a72\u7b97\u662f SVG filter \u88cf\u982d\u6700\u7c21\u55ae\u7684\u6ffe\u93e1\uff0c\u56e0\u70ba\u5b83\u53ea\u6709\u4e00\u500b\u53c3\u6578\u9700\u8981\u6ce8\u610f\uff1astdDeviation\uff0c\u9019\u4e5f\u662f\u63a7\u5236\u6a21\u7cca\u7a0b\u5ea6\u7684\u53c3\u6578\uff0c\u6578\u5b57\u8d8a\u5927\u8d8a\u6a21\u7cca\uff0c\u6578\u5b57\u70ba\u96f6\u5247\u662f\u5716\u7247\u539f\u672c\u7684\u72c0\u614b\uff0c\u5728\u9019\u908a\u6709\u4e00\u500b\u6bd4\u8f03\u9700\u8981\u6ce8\u610f\u7684\u5730\u65b9\uff0c\u5c31\u662f\u8981\u8a18\u5f97\u8a2d\u5b9a filter \u7684filterUnits\u70ba userSpaceOnUse \uff0c\u56e0\u70ba\u9810\u8a2d\u503c\u662f\u6703\u8b93 filter \u8ddf\u96a8\u8457\u5957\u7528\u8a72 filter \u7684\u7269\u4ef6\u8dd1\uff0c\u6240\u4ee5\u8981\u8a18\u5f97\u8a2d\u5b9a\u6210\u8ddf\u96a8\u6574\u500b SVG space\u3002\n <?xml version='1.0' encoding='UTF-8' standalone='no'?>\n <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='160' height='160'>\n <defs>\n \t <radialGradient id='r4' cx='50%' cy='50%' r='50%' >\n <stop style='stop-color:#fff100' offset='0%' />\n <stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' />\n <stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' />\n </radialGradient>\n <filter id='f1' >\n <feGaussianBlur stdDeviation='3' />\n </filter>\n </defs>\n <circle cx='79' cy='79' r='75' style=\"fill:url(#r4);filter:url(#f1);\" />\n </svg>\nfeGaussianBlur\u5f8c\u9762\u7684stdDeviation='3'\u7528\u4f86\u8a2d\u5b9a\u6a21\u7cca\u7684\u7a0b\u5ea6\uff0c0\u5c31\u662f\u5b8c\u5168\u6c92\u6709\u6539\u8b8a\u3002\n\n===path===\n\u7528\u53c3\u6578(0~1)\u548c\u63a7\u5236\u9ede\u4f5c\u5716\uff1a\n#\u4e00\u6b21\uff1a<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/B%C3%A9zier_1_big.gif' width='240px' height='*' />\n#\u4e8c\u6b21\uff1a<img src='https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif' width='240px' height='*' />\u3000<img src='https://upload.wikimedia.org/wikipedia/commons/6/6b/B%C3%A9zier_2_big.svg' width='240px' height='*' />\n#\u4e09\u6b21\uff1a<img src='https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif' width='240px' height='*' />\u3000<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/B%C3%A9zier_3_big.svg' width='240px' height='*' />\n#\u56db\u6b21\uff1a<img src='https://upload.wikimedia.org/wikipedia/commons/a/a4/B%C3%A9zier_4_big.gif' width='240px' height='*' />\u3000<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/B%C3%A9zier_4_big.svg' width='240px' height='*' />\n#\u4e94\u6b21\uff1a<img src='https://upload.wikimedia.org/wikipedia/commons/0/0b/BezierCurve.gif' width='240px' height='*' />\n\n====path\u793a\u7bc4====\n#[http://jendo.org/~thisNasAdmin/path1.svg \u6ce2\u6d6a]\n#[http://jendo.org/~thisNasAdmin/path2.svg \u4e8c,\u4e09\u6b21\u8c9d\u8332\u66f2\u7dda]\n#[http://jendo.org/~thisNasAdmin/path3.svg \u4e09\u6b21\u8c9d\u8332\u66f2\u7dda\u8ecc\u8de1]\n#[http://jendo.org/~thisNasAdmin/path4.svg \u5faa\u8de1\u5b57\u4e32(textPath\u5b50\u6a19\u7c64)]\n#[http://jendo.org/~thisNasAdmin/path5.svg \u7c21\u6613\u52d5\u756b(\u9f52\u8f2a\u81ea\u8f49)]\n#[http://jendo.org/~thisNasAdmin/path6.svg \u7c21\u6613\u52d5\u756b(\u9f52\u8f2a\u81ea\u8f49\u4e26\u524d\u9032)]\n\u6a19\u7c64\uff1a\n#set(\u958b\u95dc)\n#*\u53ea\u7528attributeName,to,begin\u4e09\u5c6c\u6027\n#animate(\u5c6c\u6027\u9023\u7e8c\u6539\u8b8a)\n#animateTransform(\u5e73\u79fb,\u65cb\u8f49,\u7e2e\u653e)\n#animateMotion(\u5faa\u8de1\u904b\u52d5)\n*\u5171\u901a\u8a9e\u6cd5\uff1a\u5c07\u6bcd\u5716\u5f62\u5206\u62c6\u6210\u958b\u59cb\u548c\u7d50\u675f\u5169\u6a19\u7c64\uff0c\u4e2d\u9593\u63d2\u5165\u52d5\u756b\u6a19\u7c64\u3002\n*\u5171\u901a\u5c6c\u6027\uff1a\n*#attributeName\uff1a\n*#*set,animate\u70ba\u67d0\u4e00\u500b\u6bcd\u5716\u5f62\u7684\u5c6c\u6027\u3002from \u548c to \u5c31\u662f\u9019\u500b\u5c6c\u6027\u7684\u503c\u5c07\u7531\u591a\u5c11\u8b8a\u5230\u591a\u5c11\u3002\n*#*animateTransform\u70ba'transform'\u53e6\u642d\u914d type \u5c6c\u6027\n*#*animateMotion\u514d\u8a2d\u6b64\u5c6c\u6027\n*#type\u5c6c\u6027\u4e4b\u503c(animateTransform\u5c08\u7528)\uff1a\n*#*rotate\u65cb\u8f49\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u89d2\u5ea6,\u65cb\u8f49\u8ef8\u5fc3x\u5ea7\u6a19,\u65cb\u8f49\u8ef8\u5fc3y\u5ea7\u6a19'\u3001to='\u7d50\u675f\u89d2\u5ea6,\u65cb\u8f49\u8ef8\u5fc3x\u5ea7\u6a19,\u65cb\u8f49\u8ef8\u5fc3y\u5ea7\u6a19'\u3002\n*#*scale\u7e2e\u653e\uff0c\u5f71\u97ff\u5c6c\u6027from='x\u8d77\u59cb\u500d\u7387,y\u8d77\u59cb\u500d\u7387'\u3001to='x\u7d50\u675f\u500d\u7387,y\u7d50\u675f\u500d\u7387'\uff0c\u500d\u7387\u662f\u81ea\u5de6\u4e0a\u539f\u9ede\u958b\u59cb\u7b97\uff0c\u5982\u679c\u540c\u7d44x,y\u500d\u7387\u76f8\u540c\uff0c\u53ef\u4ee5\u53ea\u5beb\u4e00\u500b\u503c\u3002\n*#*translate\u5e73\u79fb\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u539f\u9edex\u5ea7\u6a19,\u8d77\u59cb\u539f\u9edey\u5ea7\u6a19'\u3001to='\u7d50\u675f\u539f\u9edex\u5ea7\u6a19,\u7d50\u675f\u539f\u9edey\u5ea7\u6a19'\u3002\n*#*skewX X\u8ef8\u4e0d\u52d5\uff0cX\u8ef8\u4e0b\u65b9\u5411\u53f3\u6b6a\u659c\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u6b6a\u659c\u89d2\u5ea6'\u3001to='\u7d50\u675f\u6b6a\u659c\u89d2\u5ea6'\n*#*skewY Y\u8ef8\u4e0d\u52d5\uff0cY\u8ef8\u53f3\u65b9\u5411\u4e0b\u6b6a\u659c\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u6b6a\u659c\u89d2\u5ea6'\u3001to='\u7d50\u675f\u6b6a\u659c\u89d2\u5ea6'\n*#begin='\u5e7es'\uff1a\u5e7e\u79d2\u958b\u59cb\u8dd1\uff0c\u901a\u5e38\u8a2d\u70ba 0s \u3002\n*#dur='\u5e7es'\uff1a\u8dd1\u4e00\u8f2a\u8981\u5e7e\u79d2\uff0c\u53ef\u4ee5\u8a2d\u70ba indefinite \u3002\n*#repeatCount='\u5e7e'\uff1a\u8981\u8dd1\u5e7e\u8f2a\uff0cindefinite\u4ee3\u8868\u7121\u9650\u591a\u8f2a\uff0c\u9810\u8a2d\u503c\u70ba1\u3002\n*#from \u958b\u59cb\u72c0\u614b(animate,animateTransform\u6709)\u3002\n*#to \u7d50\u675f\u72c0\u614b(set,animate,animateTransform\u6709)\u3002\n*#path(animateMotion\u5c08\u7528) \u5c6c\u6027\u70ba\u79fb\u52d5\u8def\u5f91\uff1a\u7531 m \u958b\u59cb\n*#rotate='auto'(animateMotion\u5c08\u7528) \u5716\u5f62\u96a8\u8def\u5f91\u66f2\u5ea6\u800c\u8f49\u6298\u3002\n\n====\u8c9d\u8332\u66f2\u7dda====\n\u5728\u6578\u5b78\u7684\u6578\u503c\u5206\u6790\u9818\u57df\u4e2d\uff0c\u8c9d\u8332\u66f2\u7dda\uff08\u82f1\u8a9e\uff1aB\u00e9zier curve\uff0c\u4ea6\u4f5c\u300c\u8c9d\u585e\u723e\u300d\uff09\u662f\u8a08\u7b97\u6a5f\u5716\u5f62\u5b78\u4e2d\u76f8\u7576\u91cd\u8981\u7684\u53c3\u6578\u66f2\u7dda\u3002\u66f4\u9ad8\u7dad\u5ea6\u7684\u5ee3\u6cdb\u5316\u8c9d\u8332\u66f2\u7dda\u5c31\u7a31\u4f5c\u8c9d\u8332\u66f2\u9762\uff0c\u5176\u4e2d\u8c9d\u8332\u4e09\u89d2\u662f\u4e00\u7a2e\u7279\u6b8a\u7684\u5be6\u4f8b\u3002\n\u8c9d\u8332\u66f2\u7dda\u65bc1962\u5e74\uff0c\u7531\u6cd5\u570b\u5de5\u7a0b\u5e2b\u76ae\u57c3\u723e\u00b7\u8c9d\u8332\uff08Pierre B\u00e9zier\uff09\u6240\u5ee3\u6cdb\u767c\u8868\uff0c\u4ed6\u904b\u7528\u8c9d\u8332\u66f2\u7dda\u4f86\u70ba\u6c7d\u8eca\u7684\u4e3b\u9ad4\u9032\u884c\u8a2d\u8a08\u3002\u8c9d\u8332\u66f2\u7dda\u6700\u521d\u7531Paul de Casteljau\u65bc1959\u5e74\u904b\u7528de Casteljau\u6f14\u7b97\u6cd5\u958b\u767c\uff0c\u4ee5\u7a69\u5b9a\u6578\u503c\u7684\u65b9\u6cd5\u6c42\u51fa\u8c9d\u8332\u66f2\u7dda\u3002\n\n=====\u4e8c\u6b21\u8c9d\u8332\u66f2\u7dda=====\n\u8c9d\u8332\u66f2\u7dda\u7684\u7a0b\u5f0f\u78bc\n <path id='a1' d='M0,50 C150,130 100,0 300,40' style='stroke:#000;fill:none;' />\n*\u7528\u8c9d\u8332\u66f2\u7dda\u8a2d\u5b9a\u6587\u5b57\u8981\u5148\u5728<def></def>\u5beb\u597d\uff0c\u518d\u4f7f\u7528id\u532f\u5165\u3002\n*\u6240\u4ee5\u53ea\u9700\u8981\u8a2d\u5b9a\u4e00\u6b21\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528\u8a2d\u597d\u7684ID\u4f7f\u7528\u591a\u6b21\u3002\n*\u6211\u53ef\u4ee5\u5728\u6bcf\u4e00\u500b<textPath></textPath>\u4e2d\u653e\u4e0a\u4e0d\u4e00\u6a23\u7684\u6587\u5b57\uff0c\u5c31\u6703\u6709\u4e00\u6a23\u7684\u89d2\u5ea6\uff0c\u4e0d\u540c\u7684\u6a23\u8c8c\n\u7a0b\u5f0f\u78bc\u5982\u4e0b(\u6b64\u70ba\u6587\u5b57)\n <textPath startOffset='4%' xlink:href='#a1' style='font-family:KaiTi;fill:pink;font-size:40px'></textPath>\n\u7d14\u8c9d\u8332\u66f2\u7dda\u6307\u4ee4\u78bc\n <path d='M0,0 Q50,50 20,0 T40,0 60,0 80,0 100,0 120,0 140,0 160,0 180,0 200,0' style='stroke:black;fill:none;' transform='translate(0,50)'/>\n\n=====\u4e09\u6b21\u8c9d\u8332\u66f2\u7dda=====\n\u4e09\u6b21\u7684\u7a0b\u5f0f\u78bc\n <path d='M0,50 C50,100 80,0 200 50' style='stroke:blue;fill:none;' />\n*\u4e09\u6b21\u8207\u5169\u6b21\u76f8\u6bd4\u66f4\u52a0\u7d30\u7dfb\u3002\n=====\u4e09\u6b21\u8207\u6578\u6b21\u8c9d\u8332\u66f2\u7dda\u7684\u5dee\u7570=====\n*\u4ee5\u6b64\u985e\u63a8\uff0c\u96d6\u7136\u66f2\u7dda\u7d30\u7dfb\u5ea6\u4e0d\u540c\uff0c\u4f46\u5e95\u5c64\u7684\u539f\u7406\u4e00\u6a23\u3002\n\n===\u52d5\u756b===\n*\u5171\u901a\u5c6c\u6027\uff1a\n*#attributeName\uff1a\n*#*set,animate\u70ba\u67d0\u4e00\u500b\u6bcd\u5716\u5f62\u7684\u5c6c\u6027\u3002from \u548c to \u5c31\u662f\u9019\u500b\u5c6c\u6027\u7684\u503c\u5c07\u7531\u591a\u5c11\u8b8a\u5230\u591a\u5c11\u3002\n*#*animateTransform\u70ba'transform'\u53e6\u642d\u914d type \u5c6c\u6027\n*#*animateMotion\u514d\u8a2d\u6b64\u5c6c\u6027\n*#type\u5c6c\u6027\u4e4b\u503c(animateTransform\u5c08\u7528)\uff1a\n*#*rotate\u65cb\u8f49\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u89d2\u5ea6,\u65cb\u8f49\u8ef8\u5fc3x\u5ea7\u6a19,\u65cb\u8f49\u8ef8\u5fc3y\u5ea7\u6a19'\u3001to='\u7d50\u675f\u89d2\u5ea6,\u65cb\u8f49\u8ef8\u5fc3x\u5ea7\u6a19,\u65cb\u8f49\u8ef8\u5fc3y\u5ea7\u6a19'\u3002\n*#*scale\u7e2e\u653e\uff0c\u5f71\u97ff\u5c6c\u6027from='x\u8d77\u59cb\u500d\u7387,y\u8d77\u59cb\u500d\u7387'\u3001to='x\u7d50\u675f\u500d\u7387,y\u7d50\u675f\u500d\u7387'\uff0c\u500d\u7387\u662f\u81ea\u5de6\u4e0a\u539f\u9ede\u958b\u59cb\u7b97\uff0c\u5982\u679c\u540c\u7d44x,y\u500d\u7387\u76f8\u540c\uff0c\u53ef\u4ee5\u53ea\u5beb\u4e00\u500b\u503c\u3002\n*#*translate\u5e73\u79fb\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u539f\u9edex\u5ea7\u6a19,\u8d77\u59cb\u539f\u9edey\u5ea7\u6a19'\u3001to='\u7d50\u675f\u539f\u9edex\u5ea7\u6a19,\u7d50\u675f\u539f\u9edey\u5ea7\u6a19'\u3002\n*#*skewX X\u8ef8\u4e0d\u52d5\uff0cX\u8ef8\u4e0b\u65b9\u5411\u53f3\u6b6a\u659c\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u6b6a\u659c\u89d2\u5ea6'\u3001to='\u7d50\u675f\u6b6a\u659c\u89d2\u5ea6'\n*#*skewY Y\u8ef8\u4e0d\u52d5\uff0cY\u8ef8\u53f3\u65b9\u5411\u4e0b\u6b6a\u659c\uff0c\u5f71\u97ff\u5c6c\u6027from='\u8d77\u59cb\u6b6a\u659c\u89d2\u5ea6'\u3001to='\u7d50\u675f\u6b6a\u659c\u89d2\u5ea6'\n*#begin='\u5e7es'\uff1a\u5e7e\u79d2\u958b\u59cb\u8dd1\uff0c\u901a\u5e38\u8a2d\u70ba 0s \u3002\n*#dur='\u5e7es'\uff1a\u8dd1\u4e00\u8f2a\u8981\u5e7e\u79d2\uff0c\u53ef\u4ee5\u8a2d\u70ba indefinite \u3002\n*#repeatCount='\u5e7e'\uff1a\u8981\u8dd1\u5e7e\u8f2a\uff0cindefinite\u4ee3\u8868\u7121\u9650\u591a\u8f2a\uff0c\u9810\u8a2d\u503c\u70ba1\u3002\n*#from \u958b\u59cb\u72c0\u614b(animate,animateTransform\u6709)\u3002\n*#to \u7d50\u675f\u72c0\u614b(set,animate,animateTransform\u6709)\u3002\n*#path(animateMotion\u5c08\u7528) \u5c6c\u6027\u70ba\u79fb\u52d5\u8def\u5f91\uff1a\u7531 m \u958b\u59cb\n*#rotate='auto'(animateMotion\u5c08\u7528) \u5716\u5f62\u96a8\u8def\u5f91\u66f2\u5ea6\u800c\u8f49\u6298\u3002\n\n\u5411\u524d\u79fb\u52d5\u4e26\u6d88\u5931\u7684\u7a0b\u5f0f\u78bc\n <?xml version='1.0' encoding='UTF-8' standalone='no'?>\n <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400' width ='1000'>\n <defs>\n <linearGradient id='LG' x1='30%' y1='0%' x2='70%' y2='0%'>\n <stop offset='0%' style='stop-color:#ffff00;stop-opacity:1' />\n <stop offset='100%' style='stop-color:#ff0000;stop-opacity:1' />\n </linearGradient>\n </defs> \n <circle cx=\"30\" cy=\"30\" r=\"25\" style=\"stroke: none; fill:url(#LG);\">\n <animate attributeName=\"cx\" attributeType=\"XML\"\n from=\"30\" to=\"1020\"\n begin=\"0s\" dur=\"3s\"\n fill=\"remove\" repeatCount=\"indefinite\"/>\n <animate attributeType=\"CSS\" attributeName=\"opacity\" from=\"1\" to=\"0\" dur=\"3s\" repeatCount=\"indefinite\" />\n </circle>\t\n </svg>\n===\u5716\u5f62\u7bc4\u4f8b===\n\u7d9c\u5408\u61c9\u7528\uff1a\n\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/waterfall1'>\n\n\u4e09\u89d2\u5f62\uff1a\n\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/inner.svg'>\n\n\u76f4\u89d2\u4e09\u89d2\u5f62\uff1a\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/text.svg'>\n\n\u52d5\u756b\uff1a\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E7%A7%BB%E5%8B%95%E6%B6%88%E5%A4%B1.svg'>\n\n\u65cb\u8f49\uff1a\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E7%AF%84%E4%BE%8B'>\n\n\u4e09\u500b\u65b9\u584a\u7684\u821e\u8e48\uff1a\n<img src='http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E4%B8%89%E6%96%B9'>\n\n\u4e92\u52d5\uff1a\n<img src='http://jendo.org/~\u5f35\u53c8\u61ff/svg/\u4e92\u52d5.svg' />\n<!--\n[http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E4%BA%92%E5%8B%95 \u6b64\u9023\u7d50\u9ede\u958b\u624d\u80fd\u4f7f\u7528] -->\n===\u53c3\u8003\u8cc7\u6599===\n[https://intersection.tw/\u8a2d\u8a08\u5e2b\u5c0d-svg-\u61c9\u8a72\u6709\u7684\u89c0\u5ff5-38ba64b48b32 \u5de5\u7a0b\u5e2b\u5fc5\u9808\u77e5\u9053\u7684SVG\u89c0\u5ff5]\n\n\n[[\u5206\u985e:\u8cc7\u8a0a\u57fa\u790e\u61c9\u7528]]"
}
]
},
"169": {
"pageid": 169,
"ns": 0,
"title": "SVG\u9032\u968e\u8907\u96dc\u7e6a\u5716",
"revisions": [
{
"contentformat": "text/x-wiki",
"contentmodel": "wikitext",
"*": "===Inkscape==="
}
]
}
}
}
}