{"action":"created","issue":{"url":"https://api.github.com/repos/rism-ch/verovio/issues/520","repository_url":"https://api.github.com/repos/rism-ch/verovio","labels_url":"https://api.github.com/repos/rism-ch/verovio/issues/520/labels{/name}","comments_url":"https://api.github.com/repos/rism-ch/verovio/issues/520/comments","events_url":"https://api.github.com/repos/rism-ch/verovio/issues/520/events","html_url":"https://github.com/rism-ch/verovio/issues/520","id":213850310,"number":520,"title":"notehead/stem interaction in SVG renderings","user":{"login":"craigsapp","id":3487289,"avatar_url":"https://avatars3.githubusercontent.com/u/3487289?v=3","gravatar_id":"","url":"https://api.github.com/users/craigsapp","html_url":"https://github.com/craigsapp","followers_url":"https://api.github.com/users/craigsapp/followers","following_url":"https://api.github.com/users/craigsapp/following{/other_user}","gists_url":"https://api.github.com/users/craigsapp/gists{/gist_id}","starred_url":"https://api.github.com/users/craigsapp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/craigsapp/subscriptions","organizations_url":"https://api.github.com/users/craigsapp/orgs","repos_url":"https://api.github.com/users/craigsapp/repos","events_url":"https://api.github.com/users/craigsapp/events{/privacy}","received_events_url":"https://api.github.com/users/craigsapp/received_events","type":"User","site_admin":false},"labels":[{"id":74100022,"url":"https://api.github.com/repos/rism-ch/verovio/labels/enhancement","name":"enhancement","color":"84b6eb","default":true},{"id":499092639,"url":"https://api.github.com/repos/rism-ch/verovio/labels/low%20priority","name":"low priority","color":"fef2c0","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2017-03-13T18:03:12Z","updated_at":"2017-03-13T20:22:34Z","closed_at":null,"body":"Stems (similar to ledger lines) should be written to the SVG before noteheads, otherwise the stems occlude the notehead:\r\n\r\n<img width=\"332\" alt=\"screen shot 2017-03-13 at 10 53 37 am\" src=\"https://cloud.githubusercontent.com/assets/3487289/23868119/817bf7c6-07db-11e7-8ce1-3dc58f240922.png\">\r\n\r\n```xml\r\n<g class=\"note highlight\" id=\"note-L13F1\" fill=\"red\" stroke=\"red\">\r\n   <use xlink:href=\"#E0A4\" x=\"6421\" y=\"1535\" height=\"720px\" width=\"720px\" />\r\n   <rect x=\"6421\" y=\"1557\" height=\"608\" width=\"20\" />\r\n</g>\r\n```\r\n\r\nIf the order were changed:\r\n\r\n<img width=\"300\" alt=\"screen shot 2017-03-13 at 10 56 31 am\" src=\"https://cloud.githubusercontent.com/assets/3487289/23868181/bffe79f6-07db-11e7-852e-a26f8fbc25d7.png\">\r\n\r\n```xml\r\n<g class=\"note highlight\" id=\"note-L13F1\" fill=\"red\" stroke=\"red\">\r\n   <rect x=\"6421\" y=\"1557\" height=\"608\" width=\"20\" />\r\n   <use xlink:href=\"#E0A4\" x=\"6421\" y=\"1535\" height=\"720px\" width=\"720px\" />\r\n</g>\r\n```\r\n\r\nIt might also be nice to label sub-components of the note element with class tags for more semantic addressing with CSS:\r\n\r\n```xml\r\n<g class=\"note highlight\" id=\"note-L13F1\" fill=\"red\" stroke=\"red\">\r\n   <rect class=\"stem\" x=\"6421\" y=\"1557\" height=\"608\" width=\"20\" />\r\n   <use class=\"head\" xlink:href=\"#E0A4\" x=\"6421\" y=\"1535\" height=\"720px\" width=\"720px\" />\r\n</g>\r\n```\r\n\r\nCSS currently:\r\n```css\r\n<style>\r\n\r\nsvg .note.highlight use {\r\n        fill: violet;\r\n}\r\n\r\nsvg .note.highlight rect {\r\n        fill: red;\r\n}\r\n\r\n</style>\r\n```\r\n\r\nwould become:\r\n\r\n```css\r\n<style>\r\nsvg .note.highlight .head {\r\n        fill: violet;\r\n}\r\n\r\nsvg .note.highlight .stem {\r\n        fill: red;\r\n}\r\n\r\n</style>\r\n```\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/rism-ch/verovio/issues/comments/286231602","html_url":"https://github.com/rism-ch/verovio/issues/520#issuecomment-286231602","issue_url":"https://api.github.com/repos/rism-ch/verovio/issues/520","id":286231602,"user":{"login":"craigsapp","id":3487289,"avatar_url":"https://avatars3.githubusercontent.com/u/3487289?v=3","gravatar_id":"","url":"https://api.github.com/users/craigsapp","html_url":"https://github.com/craigsapp","followers_url":"https://api.github.com/users/craigsapp/followers","following_url":"https://api.github.com/users/craigsapp/following{/other_user}","gists_url":"https://api.github.com/users/craigsapp/gists{/gist_id}","starred_url":"https://api.github.com/users/craigsapp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/craigsapp/subscriptions","organizations_url":"https://api.github.com/users/craigsapp/orgs","repos_url":"https://api.github.com/users/craigsapp/repos","events_url":"https://api.github.com/users/craigsapp/events{/privacy}","received_events_url":"https://api.github.com/users/craigsapp/received_events","type":"User","site_admin":false},"created_at":"2017-03-13T20:22:34Z","updated_at":"2017-03-13T20:22:34Z","body":"That is good:\r\n\r\n```\r\n<g class=\"note highlight\" id=\"note-L13F1\" fill=\"red\" stroke=\"red\">\r\n  <g class=\"stem\">\r\n     <rect x=\"6421\" y=\"1557\" height=\"608\" width=\"20\" />\r\n  </g>\r\n  <g class=\"head\"> \r\n    <use  xlink:href=\"#E0A4\" x=\"6421\" y=\"1535\" height=\"720px\" width=\"720px\" />\r\n  </g>\r\n</g>\r\n```\r\n\r\nAlthough a bit verbose :-) But it will make thing more consistent, since compound graphical elements should be wrapped into a g element to label them (such as the 5 lines of a staff).\r\n\r\n"}}
{"actor":{"display_login":"craigsapp"}}