[MEI-L] Colouring a note head
Reinier de Valk
reinierdevalk at gmail.com
Fri Nov 3 10:48:22 CET 2017
Hi Craig,
Apologies for the late reply. That looks good, I'm going to play with it!
Thanks,
Reinier
2017-10-19 18:38 GMT+02:00 Craig Sapp <craigsapp at gmail.com>:
> Hoi Reinier,
>
> If you add an attribute called "type" to a note, this attribute will be
> converted to a class name in the rendered SVG using verovio.
>
> Example:
>
> <note xml:id="note-L3F1" type="*highlight*" dur="4" oct="5" pname="f"
> accid="s">
> <artic xml:id="artic-L3F1" artic="stacc acc" />
> </note>
>
> representing the note:
> [image: Inline images 1]
> I added the attribute type="highlight" to the note. When converted to SVG
> using verovio:
>
> <g class="note *highlight*" id="note-L3F1">
> <*use* xlink:href="#E0A4" x="1094" y="1400" height="720px"
> width="720px" />
> <g class="*stem*" id="stem-0000000078965084">
> <rect x="1094" y="1422" height="608" width="20" />
> </g>
> <g class="*accid*" id="accid-0000001530885643">
> <use xlink:href="#E262" x="825" y="1400" height="720px"
> width="720px" />
> </g>
> <g class="*artic*" id="artic-L3F1">
> <g class="*articPart*" id="artic-part-0000000021272942">
> <use xlink:href="#E4A2" x="1183" y="1265" height="514px"
> width="514px" />
> </g>
> <g class="*articPart*" id="artic-part-0000001052050792">
> <use xlink:href="#E4A0" x="1119" y="1172" height="514px"
> width="514px" />
> </g>
> </g>
> </g>
>
> Notice that the note has an added class "highlight" which comes from
> note at type in the MEI data. This class can be used to select the note or
> parts of the note for manipulation with CSS.
>
> Also notice the internal structure of the SVG note. The notehead is given
> first use element and is not wrapped in a separate g element like the other
> pieces. The notehead is given by the first <use> element:
> <*use* xlink:href="#E0A4" x="1094" y="1400" height="720px"
> width="720px" />
>
> So the CSS code to highlight only the notehead would be:
>
> <style>
> g.note.highlight > use {
> fill: chocolate;
> }
> </style>
> [image: Inline images 1]
> The ">" in the selector
> g.note.highlight > use
> means to select all use elements which are direct children of
> g.note.highlight (not any of the grandchildren or later descendants).
>
> Note in particular that in order to use CSS on the SVG image, the SVG must
> be directly in the DOM (HTML code) and not loaded as an image with <img>.
>
> Here is a more complicated stylesheet to highlight all of the components
> of the note:
>
> <style>
> @namespace xlink 'http://www.w3.org/1999/xlink';
>
> g.note.highlight > use {
> fill: chocolate;
> }
>
> g.note.highlight g.accid {
> fill: limegreen;
> }
>
> g.note.highlight g.stem {
> fill: orange;
> }
>
> g.note.highlight g.artic {
> fill: red;
> }
>
> g.note.highlight use[xlink|href="#E4A2"] {
> fill: hotpink;
> }
>
> </style>
>
> which produces:
>
> [image: Inline images 4]
>
> The last selector:
> g.note.highlight use[xlink|href="#E4A2"]
> is used to specifically select staccatos on the highlighted note using the
> SMuFL codepoint for staccatos. This selector requires loading the xlink
> namespace into the stylesheet:
> @namespace xlink 'http://www.w3.org/1999/xlink';
>
> The stem is shown visually above the notehead, so the notehead may be
> moved in the future:
> https://github.com/rism-ch/verovio/issues/520
>
> Beams and slurs/ties would require more coloring for the stroke attribute.
>
> Here is the full HTML example (with the embedded SVG):
>
> <html>
> <head>
> <title>Test Notes</title>
> </head>
> <body>
>
> <style>
> @namespace xlink 'http://www.w3.org/1999/xlink';
>
> g.note.highlight > use {
> fill: chocolate;
> }
>
> g.note.highlight g.accid {
> fill: limegreen;
> }
>
> g.note.highlight g.stem {
> fill: orange;
> }
>
> g.note.highlight g.artic {
> fill: red;
> }
>
> g.note.highlight use[xlink|href="#E4A2"] {
> fill: hotpink;
> }
>
> </style>
>
>
> <svg width="2100.00px" height="2970.00px" version="1.1" xmlns="
> http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
> overflow="visible">
> <desc>Engraved by Verovio 2.0.0-dev-ae70647-dirty</desc>
> <defs>
> <symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit">
> <path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102
> 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c-4 60 11 123 44
> 189c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5
> 89c0 117 16 172 69 257c34 54 64 82 89 82c21 0 43 -30 69 -92 s39 -115 41
> -159c2 -120 -19 -173 -67 -256c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37
> -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c11
> -135 -80 -229 -180 -270c8 -57 17 -110 25 -162c5 -31 6 -58 6 -80c0 -30 -5
> -53 -14 -70 c-35 -64 -88 -99 -158 -103c-42 -3 -83 6 -124 26c-50 24 -77 59
> -80 105c-2 34 5 63 20 87c18 28 45 42 79 44c51 4 99 -40 103 -87c4 -56 -30
> -94 -105 -115c17 -24 51 -36 102 -36c62 0 116 43 140 85c9 16 13 41 13 74c0
> 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939 c-95 0 -135 -175 -135 -286c0
> -24 2 -48 5 -71c50 39 92 82 127 128c43 57 63 106 60 148c-4 54 -23 82 -57
> 81zM406 119l54 -326c80 27 116 88 109 184c-7 99 -62 146 -163 142zM382
> 117c-74 -2 -132 -50 -128 -127c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10 c-70
> 33 -116 88 -123 172c-5 73 42 135 88 170c23 17 49 29 78 36l-29 170c-21 -13
> -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-49 -75 -71 -140 -67 -195c5 -68
> 35 -127 93 -176s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" />
> </symbol>
> <symbol id="E0A4" viewBox="0 0 1000 1000" overflow="inherit">
> <path transform="scale(1,-1)" d="M0 -39c0 68 73 172 200 172c66 0 114 -37
> 114 -95c0 -84 -106 -171 -218 -171c-64 0 -96 30 -96 94z" />
> </symbol>
> <symbol id="E262" viewBox="0 0 1000 1000" overflow="inherit">
> <path transform="scale(1,-1)" d="M136 186v169h17v-164l44 14v-91l-44
> -14v-165l44 12v-91l-44 -13v-155h-17v150l-76 -22v-155h-17v149l-43 -13v90l43
> 14v167l-43 -14v92l43 13v169h17v-163zM60 73v-167l76 22v168z" />
> </symbol>
> <symbol id="E4A2" viewBox="0 0 1000 1000" overflow="inherit">
> <path transform="scale(1,-1)" d="M0 45c0 13.333 4.33301 24.667 13
> 34s19.333 14.333 32 15c14 0 25.667 -4 35 -12s14.333 -19 15 -33c0 -13.333
> -4.33301 -24.667 -13 -34s-19.333 -14.333 -32 -15c-14 0 -25.667 4 -35
> 12s-14.333 19 -15 33z" />
> </symbol>
> <symbol id="E4A0" viewBox="0 0 1000 1000" overflow="inherit">
> <path transform="scale(1,-1)" d="M0 236l347 -119l-347 -117v33l252 84l-252
> 86v33z" />
> </symbol>
> </defs>
> <style type="text/css">g.page-margin{font-family:Times;}
> g.tempo{font-weight:bold;} g.dir, g.dynam{font-style:italic;}
> g.label{font-weight:normal;}</style>
> <svg class="definition-scale" viewBox="0 0 21000 29700">
> <g class="page-margin" transform="translate(500, 500)">
> <g class="system" id="system-0000000147693057">
> <g class="section boundaryStart" id="section-0000000211317838" />
> <g class="measure" id="measure-L2">
> <g class="staff" id="staff-L2F1N1">
> <path d="M0 1400 L1829 1400" stroke="#000000" stroke-width="20" />
> <path d="M0 1580 L1829 1580" stroke="#000000" stroke-width="20" />
> <path d="M0 1760 L1829 1760" stroke="#000000" stroke-width="20" />
> <path d="M0 1940 L1829 1940" stroke="#000000" stroke-width="20" />
> <path d="M0 2120 L1829 2120" stroke="#000000" stroke-width="20" />
> <g class="clef">
> <use xlink:href="#E050" x="90" y="1940" height="720px" width="720px" />
> </g>
> <g class="layer" id="layer-L2F1N1">
> <g class="note highlight" id="note-L3F1">
> <g class="stem" id="stem-0000000078965084">
> <rect x="1094" y="1422" height="608" width="20" />
> </g>
> <use xlink:href="#E0A4" x="1094" y="1400" height="720px" width="720px" />
> <g class="accid" id="accid-0000001530885643">
> <use xlink:href="#E262" x="825" y="1400" height="720px" width="720px" />
> </g>
> <g class="artic" id="artic-L3F1">
> <g class="articPart" id="artic-part-0000000021272942">
> <use xlink:href="#E4A2" x="1183" y="1265" height="514px" width="514px" />
> </g>
> <g class="articPart" id="artic-part-0000001052050792">
> <use xlink:href="#E4A0" x="1119" y="1172" height="514px" width="514px" />
> </g>
> </g>
> </g>
> </g>
> </g>
> <g class="barLineAttr" id="bline-0000001518569483">
> <path d="M1664 1400 L1664 2120" stroke="#000000" stroke-width="30" />
> <path d="M1784 1400 L1784 2120" stroke="#000000" stroke-width="90" />
> </g>
> </g>
> <g class="boundaryEnd section-0000000211317838"
> id="bdend-0000001273392098" />
> </g>
> </g>
> </svg>
> </svg>
>
> </body>
>
>
>
>
>
>
> _______________________________________________
> mei-l mailing list
> mei-l at lists.uni-paderborn.de
> https://lists.uni-paderborn.de/mailman/listinfo/mei-l
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.uni-paderborn.de/pipermail/mei-l/attachments/20171103/d1c19951/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2017-10-19 at 9.09.17 AM.png
Type: image/png
Size: 112074 bytes
Desc: not available
URL: <http://lists.uni-paderborn.de/pipermail/mei-l/attachments/20171103/d1c19951/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2017-10-19 at 8.28.46 AM.png
Type: image/png
Size: 18007 bytes
Desc: not available
URL: <http://lists.uni-paderborn.de/pipermail/mei-l/attachments/20171103/d1c19951/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2017-10-19 at 8.55.15 AM.png
Type: image/png
Size: 113396 bytes
Desc: not available
URL: <http://lists.uni-paderborn.de/pipermail/mei-l/attachments/20171103/d1c19951/attachment-0002.png>
More information about the mei-l
mailing list