{"json_modified": "2016-09-29T05:31:55.331845", "uuid": "db0374c4-c521-4831-8aac-b8d4842dec7a", "title": "Positions", "url": "/en-US/docs/Web/SVG/Tutorial/Positions", "tags": ["NeedsBeginnerUpdate", "SVG", "SVG:Tutorial", "beginner", "Beginner"], "translations": [{"uuid": "90c25fe1-2867-472b-b367-7fb094b4ce0f", "title": "Positionnement", "url": "/fr/docs/Web/SVG/Tutoriel/Positionnement", "tags": ["SVG", "SVG:Tutoriel"], "summary": "\"\"Pour chaque \u00e9l\u00e9ment, SVG utilise un ensemble de coordonn\u00e9es aussi appel\u00e9 grille assez similaire \u00e0 ce qui est utilis\u00e9 dans canvas (et par tout un tas d'autres routines de dessin informatique). Dans le cas pr\u00e9sent, le point en haut \u00e0 gauche est consid\u00e9r\u00e9 comme le point (0,0). Le positionnement est ensuite mesur\u00e9 en pixel, depuis le coin sup\u00e9rieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire \u00e0 la g\u00e9om\u00e9trie que l'on vous a enseign\u00e9e. Ici, le positionnement fonctionne de la m\u00eame mani\u00e8re que pour les \u00e9l\u00e9ments HTML.", "localization_tags": [], "locale": "fr", "last_edit": "2014-05-29T00:21:25", "review_tags": []}, {"uuid": "67ac2b69-bb0b-4357-bd02-1f82fa310611", "title": "Positions", "url": "/ja/docs/Web/SVG/Tutorial/Positions", "tags": ["SVG", "SVG:Tutorial"], "summary": "", "localization_tags": [], "locale": "ja", "last_edit": "2013-06-08T16:21:45", "review_tags": []}, {"uuid": "e96440eb-05d5-430e-888b-7c04cf9e71b3", "title": "\u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u043f\u043e\u0437\u0438\u0446\u0438\u0438)", "url": "/ru/docs/Web/SVG/Tutorial/%D0%9F%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%B8", "tags": ["SVG:\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e", "SVG"], "summary": "\"\"SVG \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438\u043b\u0438 \u0441\u0435\u0442\u043e\u0447\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0441\u0445\u043e\u0436\u0443\u044e \u0441 \u0442\u043e\u0439, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f canvas (\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f). \u0417\u0434\u0435\u0441\u044c \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043b\u0435\u0432\u044b\u0439 \u0443\u0433\u043e\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0442\u043e\u0447\u043a\u0443 (0,0). \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u0441 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c x, \u0443\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0432\u043f\u0440\u0430\u0432\u043e, \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c y, \u0443\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0432\u043d\u0438\u0437. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e \u0442\u043e\u043c\u0443, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0441 \u0434\u0435\u0442\u0441\u0442\u0432\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b HTML.", "localization_tags": ["inprogress"], "locale": "ru", "last_edit": "2016-06-23T11:47:51", "review_tags": ["technical"]}, {"uuid": "dc9fb563-4c10-4eae-9e08-f4c2dbe1f715", "title": "\u5750\u6807\u5b9a\u4f4d", "url": "/zh-CN/docs/Web/SVG/Tutorial/Positions", "tags": [], "summary": "\"\" \u5bf9\u4e8e\u6240\u6709\u5143\u7d20\uff0cSVG\u4f7f\u7528\u7684\u5750\u6807\u7cfb\u7edf\u6216\u8005\u8bf4\u7f51\u683c\u7cfb\u7edf\uff0c\u548cCanvas\u7528\u7684\u5dee\u4e0d\u591a\uff08\u6240\u6709\u8ba1\u7b97\u673a\u7ed8\u56fe\u90fd\u5dee\u4e0d\u591a\uff09\u3002\u8fd9\u79cd\u5750\u6807\u7cfb\u7edf\u662f\uff1a\u4ee5\u9875\u9762\u7684\u5de6\u4e0a\u89d2\u4e3a(0,0)\u5750\u6807\u70b9\uff0c\u5750\u6807\u4ee5\u50cf\u7d20\u4e3a\u5355\u4f4d\uff0cx\u8f74\u6b63\u65b9\u5411\u662f\u5411\u53f3\uff0cy\u8f74\u6b63\u65b9\u5411\u662f\u5411\u4e0b\u3002\u6ce8\u610f\uff0c\u8fd9\u548c\u4f60\u5c0f\u65f6\u5019\u6240\u6559\u7684\u7ed8\u56fe\u65b9\u5f0f\u662f\u76f8\u53cd\u7684\u3002\u4f46\u662f\u5728HTML\u6587\u6863\u4e2d\uff0c\u5143\u7d20\u90fd\u662f\u7528\u8fd9\u79cd\u65b9\u5f0f\u5b9a\u4f4d\u7684\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2015-10-09T01:18:16", "review_tags": []}, {"uuid": "024d3496-d717-4544-9f7c-b5ee9792f2b5", "title": "\u5ea7\u6a19\u5b9a\u4f4d", "url": "/zh-TW/docs/Web/SVG/Tutorial/Positions", "tags": ["SVG:\u6559\u7a0b", "SVG"], "summary": "\"\" \u5c0d\u65bc\u6240\u6709\u5143\u7d20\uff0cSVG\u4f7f\u7528\u7684\u5ea7\u6a19\u7cfb\u7edf\u6216\u8005\u8aaa\u7db2\u683c\u7cfb\u7d71\uff0c\u548cCanvas\u7528\u7684\u5dee\u4e0d\u591a\uff08\u6240\u6709\u96fb\u8166\u7e6a\u5716\u7ed8\u56fe\u90fd\u5dee\u4e0d\u591a\uff09\u3002\u9019\u7a2e\u5ea7\u6a19\u7cfb\u7edf\u662f\uff1a\u4ee5\u9801\u9762\u7684\u5de6\u4e0a\u89d2\u70ba(0,0)\u5750\u6a19\u9ede\uff0c\u5750\u6a19\u4ee5\u50cf\u7d20\u70ba\u55ae\u4f4d\uff0cx\u8ef8\u6b63\u65b9\u5411\u662f\u5411\u53f3\uff0cy\u8ef8\u6b63\u65b9\u5411\u662f\u5411\u4e0b\u3002\u6ce8\u610f\uff0c\u9019\u548c\u4f60\u5c0f\u6642\u5019\u6240\u6559\u7684\u7e6a\u5716\u65b9\u5f0f\u662f\u76f8\u53cd\u7684\u3002\u4f46\u662f\u5728HTML\u6587\u6a94\u4e2d\uff0c\u5143\u7d20\u90fd\u662f\u7528\u9019\u7a2e\u65b9\u5f0f\u5b9a\u4f4d\u7684\u3002", "localization_tags": [], "locale": "zh-TW", "last_edit": "2016-06-08T03:07:51", "review_tags": []}], "modified": "2016-09-29T05:31:55", "label": "Positions", "localization_tags": [], "locale": "en-US", "id": 168, "last_edit": "2016-09-29T05:31:52", "summary": "\"\"For all elements, SVG uses a coordinate system or grid system similar to the one used by canvas (and by a whole lot of other computer drawing routines). That is, the top left corner of the document is considered to be the point (0,0). Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom. Note that this is the opposite of the way you're taught to graph as a kid. However, this is the same way elements in HTML are positioned (By default, LTR documents are considered not the RTL documents which position X from right-to-left).", "sections": [{"id": "The_grid", "title": "The grid"}, {"id": "Example", "title": "Example:"}, {"id": "What_are_pixels", "title": "What are \"pixels\"?"}], "slug": "Web/SVG/Tutorial/Positions", "review_tags": []}