[MEI-L] Colouring a note head
Craig Sapp
craigsapp at gmail.com
Thu Oct 19 18:38:14 CEST 2017
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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.uni-paderborn.de/pipermail/mei-l/attachments/20171019/20ff8fd1/attachment.html>
-------------- 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/20171019/20ff8fd1/attachment.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/20171019/20ff8fd1/attachment-0001.png>
-------------- 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/20171019/20ff8fd1/attachment-0002.png>
More information about the mei-l
mailing list