<svg> \/\/\u76f8\u5f53\u4e8e\u4e00\u4e2a\u8ba9\u821e\u53f0\u662fsvg\u80fd\u5c55\u793a\u6548\u679c\u7684\u533a\u57df
\nviewBox=”280,80,20,20″ \/\/\u8d77\u70b9x\u8f74\u4e3a280\uff0cy\u8f7480\uff0c\u5bbd20\uff0c\u9ad820\u7684\u533a\u57df\u5728svg\u4e2d\u622a\u56fe\u5e76\u4e14\u94fa\u6ee1svg<\/p>\n
<svg width=”400″ height=”300″ viewBox=”0,0,40,30″ style=”border:1px solid #cd0000;”><\/svg>
\nviewport\u4e0epreserveaspectratio
\nhttp:\/\/www.zhangxinxu.com\/wordpress\/2014\/08\/svg-viewport-viewbox-preserveaspectratio\/
\nhttp:\/\/www.drawsvg.org\/ svg\u5728\u7ebf\u7ed8\u56fe
\nhttp:\/\/editor.method.ac\/<\/p>\n
<\/p>\n
svg css\u5c5e\u6027
\nfill: orange \/\/\u586b\u5145\u989c\u8272
\nstroke: black \/\/\u8fb9\u6846\u989c\u8272
\nstroke-width: 3 \/\/\u8fb9\u6846\u5927\u5c0f
\nstroke-dasharray: 10, 5 \/\/\u865a\u7ebf\u95f4\u9694
\nstroke-opacity: \/\/\u8868\u793a\u63cf\u8fb9\u900f\u660e\u5ea6<\/p>\n
stroke-linecap \/\/\u8868\u793a\u63cf\u8fb9\u7aef\u70b9\u8868\u73b0\u65b9\u5f0fstroke-linejoin
\nstroke-linejoin \/\/\u8868\u793a\u63cf\u8fb9\u8f6c\u89d2\u7684\u8868\u73b0\u65b9\u5f0f
\nstroke-miterlimit
\nhttp:\/\/www.zhangxinxu.com\/wordpress\/2014\/04\/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%https:\/\/css-tricks.com\/guide-svg-animations-smil\/84\/
\nsvg animate\u7b80\u5355\u52a8\u753b<\/p>\n
<\/p>\n
<set attributeName=”x” attributeType=”XML” to=”60″ begin=”3s” \/>
\n3\u79d2\u540e \u6cbfX\u8f74\u79fb\u52a8\u5230 60px\u4f4d\u7f6e<\/p>\n
<set> \/\/\u53ef\u4ee5\u5728\u7279\u5b9a\u65f6\u95f4\u4e4b\u540e\u4fee\u6539\u67d0\u4e2a\u5c5e\u6027\u503c\uff08\u4e5f\u53ef\u4ee5\u662fCSS\u5c5e\u6027\u503c\uff09
\n<animateColor> \/\/\u5e9f\u5f03<animate>\u53ef\u4ee5\u5b9e\u73b0\u5b83\u7684\u6548\u679c
\n<animateTransform> \/\/\u8ddfcss\u7684Transform\u4e00\u6837
\n<animateMotion> \/\/\u8ba9SVG\u5404\u79cd\u56fe\u5f62\u6cbf\u7740\u7279\u5b9a\u7684path\u8def\u5f84\u8fd0\u52a8
\n<animate>
\n—————————————————————–<\/p>\n
<set> \u4f8b\u5b50\uff1a
\n<text font-family=”microsoft yahei” font-size=”120″ y=”160″ x=”160″>
\n\u9a6c
\n<set attributeName=”x” attributeType=”XML” to=”60″ begin=”3s” \/> \/\/3\u79d2<text>X\u503c\u8bbe\u7f6e\u4e3a60
\n<\/text><\/p>\n
—————————————————————–<\/p>\n
<animateTransform> \u4f8b\u5b50\uff1a<\/p>\n
<rect>
\n<animateTransform
\nattributeType=”xml” \/\/\u5f00\u59cb\u58f0\u660exml\u7c7b\u578b\uff0c\u5982\u679c\u4e0d\u58f0\u660esvg\u4f1a\u81ea\u52a8\u5339\u914d\uff08\u53ef\u9009\uff09
\nattributeName=”transform” type=”rotate” \/\/\u58f0\u660e\u52a8\u753b\u5c5e\u6027\u662frotate
\nfrom=”0″ to=”90″ \/\/0deg\u523090deg
\nbegin=”0″ dur=”5s” \/\/\u8fc7\u6e21\u65f6\u95f4\u4e3a5s
\nfill=”freeze”
\n\/>
\n<\/rect>
\n——————————————————————
\n<animateMotion> \u4f8b\u5b50\uff1a
\n<text font-family=”microsoft yahei” font-size=”40″ x=”0″ y=”0″ fill=”#cd0000″>\u9a6c
\n<animateMotion path=”M10,80 q100,120 120,20 q140,-50 160,0″ begin=”0s” dur=”3s” rotate=”auto” repeatCount=”indefinite”\/>
\n<\/text><\/p>\n
<path d=”M10,80 q100,120 120,20 q140,-50 160,0″ stroke=”#cd0000″ stroke-width=”2″ fill=”none” \/>
\n—————————————————————-<\/p>\n
<animate> \u6548\u679c\u7ec4\u5408\u4f8b\u5b50\uff1a<\/p>\n
<\/p>\n
<svg width=”320″ height=”200″ xmlns=”http:\/\/www.w3.org\/2000\/svg”>
\n<text font-family=”microsoft yahei” font-size=”120″ y=”160″ x=”160″>\u9a6c
\n<animate attributeName=”x” from=”160″ to=”60″ begin=”0s” dur=”3s” repeatCount=”indefinite” \/>
\n<animate attributeName=”opacity” from=”1″ to=”0″ begin=”0s” dur=”3s” repeatCount=”indefinite” \/>
\n<\/text>
\n<\/svg>
\n—————————————————————
\nanimate \u5c5e\u6027<\/p>\n
attributeName = \/\/\u8981\u53d8\u5316\u7684\u5143\u7d20\u5c5e\u6027\u540d\u79f0
\nattributeType = \u201cCSS | XML | auto\u201d \/\/\u7528\u6765\u8868\u660eattributeName\u5c5e\u6027\u503c\u7684\u5217\u8868\uff0c\u8981\u5199css\u8fd8\u662f\u5199svg,\u4f8b\u5982css\u662fstyle=”height:100px”,XML\u662fheight=100
\nfrom = \/\/
\nto = \/\/
\nbegin= \/\/
\ndur= \/\/
\ncalcMode= \/\/
\nrepeatCount= \/\/ \u52a8\u753b\u6267\u884c\u6b21\u6570
\nrepeatDur= \/\/\u91cd\u590d\u52a8\u753b\u7684\u603b\u65f6\u95f4
\nfill= \/\/ \u52a8\u753b\u7ed3\u675f\u540e\u662f\u5426\u4fdd\u6301\u7ed3\u675f\u540e\u7684\u72b6\u6001<\/p>\n