{"id":4323,"date":"2014-08-27T18:48:43","date_gmt":"2014-08-27T10:48:43","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=4323"},"modified":"2018-06-15T23:51:02","modified_gmt":"2018-06-15T15:51:02","slug":"svg-viewport-viewbox-preserveaspectratio","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2014\/08\/svg-viewport-viewbox-preserveaspectratio\/","title":{"rendered":"\u7406\u89e3SVG viewport,viewBox,preserveAspectRatio\u7f29\u653e"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=4323<\/a><\/p>\n

\u4e07\u4e08\u9ad8\u697c\u5e73\u5730\u8d77\uff0c\u57fa\u7840\u5f88\u91cd\u8981\u3002<\/p>\n

viewport<\/h3>\n

\u8868\u793aSVG\u53ef\u89c1\u533a\u57df\u7684\u5927\u5c0f\uff0c\u6216\u8005\u53ef\u4ee5\u60f3\u8c61\u6210\u821e\u53f0\u5927\u5c0f\uff0c\u753b\u5e03\u5927\u5c0f\u3002<\/p>\n

\n
<svg width=\"500\" height=\"300\"><\/svg><\/pre>\n<\/div>\n
\u4e0a\u9762\u7684SVG\u4ee3\u7801\u5b9a\u4e49\u4e86\u4e00\u4e2a\u89c6\u533a\uff0c\u5bbd500\u5355\u4f4d\uff0c\u9ad8300\u5355\u4f4d\u3002<\/p>\n
\u6ce8\u610f\u8fd9\u91cc\u7684\u63aa\u8f9e\u662f\u201c\u5355\u4f4d\u201d\uff0c\u4e0d\u662f\u201c\u50cf\u7d20\u201d\u3002\u867d\u7136\u8bf4\uff0cwidth<\/code>\/height<\/code>\u5982\u679c\u662f\u7eaf\u6570\u5b57\uff0c\u4f7f\u7528\u7684\u5c31\u662f\u201c\u50cf\u7d20\u201d\u4f5c\u4e3a\u5355\u4f4d\u7684\u3002<\/p>\n
\u4e5f\u5c31\u662f\u8bf4\uff0c\u4e0a\u9762SVG\u7684\u89c6\u533a\u5927\u5c0f\u5c31\u662f500px * 300px<\/code>.<\/p>\n
\u5f53\u7136\uff0c\u6545\u5f04\u201c\u5355\u4f4d\u201d\u8fd9\u4e2a\u63aa\u8f9e\uff0c\u6f5c\u53f0\u8bcd\u5c31\u662f\u4f60\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u7c7b\u578b\u7684\u5355\u4f4d\uff0c\u6db5\u76d6\u5e38\u89c1CSS\u5355\u4f4d\uff1a<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
\u5355\u4f4d<\/th>\n\u542b\u4e49<\/th>\n<\/tr>\n
em<\/td>\n\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f<\/td>\n<\/tr>\n
ex<\/td>\n\u76f8\u5bf9\u4e8e\u5c0f\u5199\u5b57\u6bcd"x"\u7684\u9ad8\u5ea6<\/td>\n<\/tr>\n
px<\/td>\n\u76f8\u5bf9\u4e8e\u5c4f\u5e55\u5206\u8fa8\u7387\u800c\u4e0d\u662f\u89c6\u7a97\u5927\u5c0f\uff1a\u901a\u5e38\u4e3a1\u4e2a\u70b9\u62161\/72\u82f1\u5bf8<\/td>\n<\/tr>\n
in<\/td>\ninch, \u8868\u82f1\u5bf8<\/td>\n<\/tr>\n
cm<\/td>\ncentimeter, \u8868\u5398\u7c73<\/td>\n<\/tr>\n
mm<\/td>\nmillimeter, \u8868\u6beb\u7c73<\/td>\n<\/tr>\n
pt<\/td>\n1\/72\u82f1\u5bf8<\/td>\n<\/tr>\n
pc<\/td>\n12\u70b9\u6d3b\u5b57\uff0c\u62161\/12\u70b9<\/td>\n<\/tr>\n
%<\/td>\n\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\u3002\u6b63\u5e38\u60c5\u51b5\u4e0b\u662f\u901a\u8fc7\u5c5e\u6027\u5b9a\u4e49\u81ea\u8eab\u6216\u5176\u4ed6\u5143\u7d20<\/td>\n<\/tr>\n<\/table>\n
\u9664\u4e86SVG\u672c\u8eab\uff0c\u5176\u4ed6\u4e00\u4e9b\u5143\u7d20\uff0c\u4f8b\u5982<rect><\/code>\u7684width<\/code>\/height<\/code>\u5c5e\u6027\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4e0a\u9762\u7684\u8fd9\u4e9b\u5355\u4f4d\uff0c\u4e5f\u662f\u9ed8\u8ba4\u5355\u4f4d\u662f\u50cf\u7d20\u3002<\/p>\n
viewBox\u5c5e\u6027<\/h3>\n
\u8fd9\u4e2a\u662f\u672c\u6587\u7684\u91cd\u70b9\uff0c\u4e5f\u662f\u96be\u70b9\u3002<\/p>\n
\u5148\u770b\u4e00\u4e2a\u6d3b\u8e66\u4e71\u8df3\u7684\u4f8b\u5b50\uff0c\u5982\u4e0bHTML\u4ee3\u7801\uff1a<\/p>\n
\n
<svg width=\"400\" height=\"300\" viewBox=\"0,0,40,30\" style=\"border:1px solid #cd0000;\">\n    <rect x=\"10\" y=\"5\" width=\"20\" height=\"15\" fill=\"#cd0000\"\/>\n<\/svg><\/pre>\n<\/div>\n
\u7ed3\u679c\u5982\u4e0b\uff1a
\n<\/svg><\/p>\n
<\/div>\n