{"id":15832364,"url":"https://github.com/splincode/snapsvg","last_synced_at":"2025-04-01T12:11:04.116Z","repository":{"id":102321641,"uuid":"64957187","full_name":"splincode/snapsvg","owner":"splincode","description":"перевод API","archived":false,"fork":false,"pushed_at":"2017-09-02T10:19:56.000Z","size":35,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-06T12:42:06.657Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/splincode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-04T18:14:16.000Z","updated_at":"2024-06-11T08:25:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"b2e4cbb1-c2e0-4ff3-8db5-90d834f66135","html_url":"https://github.com/splincode/snapsvg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splincode%2Fsnapsvg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splincode%2Fsnapsvg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splincode%2Fsnapsvg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/splincode%2Fsnapsvg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/splincode","download_url":"https://codeload.github.com/splincode/snapsvg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246635983,"owners_count":20809333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-05T12:41:51.877Z","updated_at":"2025-04-01T12:11:04.074Z","avatar_url":"https://github.com/splincode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# snapsvg\nперевод API - http://snapsvg.io/docs/\n\n\n### Инициализация холста\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n  \u003cstyle\u003e\n    \n    * { \n      margin: 0;\n      padding: 0;\n    }\n\n    html, body {\n      height: 100%; width: 100%;\n    }\n\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \n  \u003csvg id=\"draw\" width=\"100%\" height=\"100%\"\u003e\n    \n\n\n  \u003c/svg\u003e\n\n  \u003cscript src=\"snap.svg-min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n````\n\n```javascript\nvar s = Snap(\"#draw\"); // теперь можем обращаться к холсту\n```\n\n### Перевод радиан в градусы и обратно\n\n```javascript\nSnap.rad(90); // 1.5707963267948966\nSnap.deg(1.5707963267948966) // 90\n```\n\n### Угол между двумя точками\n\n\u003cimg src=\"https://habrastorage.org/files/a48/0cd/b9e/a480cdb9e05744788be4075af690fd5d.png\"/\u003e\n\n```javascript\nSnap.angle(10, 10, 0, 0) // 45\n```\n\n### Привязка к сетке [ Snap.snapTo() ]\n\n```javascript\nvar gridSize = 50;\nvar orig = {\n  x: 0,\n  y: 0\n};\n\nvar block = s.rect(100, 100, 100, 100, 20, 20);\nblock.attr({\n    fill: \"rgb(236, 240, 241)\",\n    stroke: \"#1f2c39\",\n    strokeWidth: 3\n});\n\nblock.drag(\n\n  function (dx, dy, x, y, e) {\n      var xSnap = Snap.snapTo(gridSize, orig.x + dx, 100000000);\n      var ySnap = Snap.snapTo(gridSize, orig.y + dy, 100000000);\n      this.attr({\n          x: xSnap,\n          y: ySnap\n      });\n  },\n  \n  function (x, y, e) {\n      orig.x = e.toElement.x.baseVal.value;\n      orig.y = e.toElement.y.baseVal.value;\n  }\n\n);\n```\n\n### Получение RGB-модели\n\n```javascript\nSnap.getRGB('#f5f5f5');\n\n// Object {r: 245, g: 245, b: 245, hex: \"#f5f5f5\", opacity: 1}\n```\n\n### Выборка DOM(SVG)-элемента\n\n```javascript\nvar circle = s.circle(90,120,80); // черный круг\n\n/*\n\n Так как в SVG холсте появился DOM элемент cirlce,\n к нему можно обращаться и вызывать методы Snap\n\n*/\n\nSnap.select(\"circle\").attr({\"fill\": \"#b5b5b5\"}); // серый круг\n\n```\n\n### Получение узла DOM(SVG)-элемента\n\n```javascript\nvar circle = s.circle(100, 100, 50);\n\ncircle.node.onclick = function () {\n    circle.attr(\"fill\", \"red\"); // по клику, круг станет красным\n};\n```\n\n### Изменение параметров DOM(SVG)-элемента\n\n```javascript\nvar circle = s.circle(100, 100, 50);\n\ncircle.attr({\n    fill: \"#fc0\", // цвет фона\n    stroke: \"#000\", // цвет границы\n    strokeWidth: 2, // ширина границы\n    \"fill-opacity\": 0.5, // прозрачность\n\n});\n\nconsole.log(circle.attr(\"fill\")); // rgb(255, 204, 0)\n```\n\n### Ограничительная рамка DOM(SVG)-элемента\n\n```javascript\nvar circle = s.circle(100, 100, 50);\n\ncircle.attr({\n    fill: \"#fc0\", // цвет фона\n    stroke: \"#000\", // цвет границы\n    strokeWidth: 2, // ширина границы\n    \"fill-opacity\": 0.5, // прозрачность\n\n});\n\nconsole.log(circle.getBBox())\n\n/*\n\nObject {\n  cx:100,\n  cy:100,\n  h:100,\n  height:100,\n  path:Array[5],\n  r0:70.76344413517704,\n  r1:50,\n  r2:50.0745946151571,\n  vb:\"49.925405384842904 50 100.1491892303142 100\",\n  w:100.1491892303142,\n  width:100.1491892303142,\n  x:49.925405384842904,\n  x2:150.0745946151571,\n  y:50,\n  y2:150\n}\n\n*/\n```\n\n### Получение значения в px\n\n```javascript\nvar circle = s.circle(100, 100, 50);\n\ncircle.attr({\n    fill: \"#fc0\", // цвет фона\n    stroke: \"#000\", // цвет границы\n    strokeWidth: 2, // ширина границы\n    \"fill-opacity\": 0.5, // прозрачность,\n    x: 100,\n    y: 150\n\n});\n\nconsole.log(circle.asPX('cx')); // 100\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsplincode%2Fsnapsvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsplincode%2Fsnapsvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsplincode%2Fsnapsvg/lists"}