Les éléments SVG apparaissent dans DOM mais sont invisibles sur l'écran

J'essaie de dessiner une suspension avec SVG en utilisant Vexflow et Raphael.js et lorsque je charge la page, les éléments SVG apparaissent dans le DOM, mais ils n'apparaissent pas sur l'écran.

J'ai vérifié s'il existe une règle CSS qui pourrait masquer les éléments, mais il n'y en a pas. Vérifié également sur différents navigateurs, différentes versions de lib, rien …

Voici le SVG apparaissant dans le DOM:

<html lang="en"><head> <meta charset="utf-8"> <title>Fermata</title> <!-- Raphael.js --> <script src="../deps/raphael/raphael-min.js"></script> <!-- VexFlow Uncompiled Sources --> <script src="../deps/vexflow/src/header.js"></script> <script src="../deps/vexflow/src/vex.js"></script> <script src="../deps/vexflow/src/flow.js"></script> <script src="../deps/vexflow/src/fraction.js"></script> <script src="../deps/vexflow/src/fonts/vexflow_font.js"></script> <script src="../deps/vexflow/src/glyph.js"></script> <script src="../deps/vexflow/src/tables.js"></script> <script src="../deps/vexflow/src/stave.js"></script> <script src="../deps/vexflow/src/staveconnector.js"></script> <script src="../deps/vexflow/src/tabstave.js"></script> <script src="../deps/vexflow/src/voice.js"></script> <script src="../deps/vexflow/src/voicegroup.js"></script> <script src="../deps/vexflow/src/modifier.js"></script> <script src="../deps/vexflow/src/modifiercontext.js"></script> <script src="../deps/vexflow/src/accidental.js"></script> <script src="../deps/vexflow/src/dot.js"></script> <script src="../deps/vexflow/src/tickcontext.js"></script> <script src="../deps/vexflow/src/tickable.js"></script> <script src="../deps/vexflow/src/note.js"></script> <script src="../deps/vexflow/src/bend.js"></script> <script src="../deps/vexflow/src/stavenote.js"></script> <script src="../deps/vexflow/src/tabnote.js"></script> <script src="../deps/vexflow/src/barnote.js"></script> <script src="../deps/vexflow/src/ghostnote.js"></script> <script src="../deps/vexflow/src/formatter.js"></script> <script src="../deps/vexflow/src/stavetie.js"></script> <script src="../deps/vexflow/src/stavehairpin.js"></script> <script src="../deps/vexflow/src/tabtie.js"></script> <script src="../deps/vexflow/src/tabslide.js"></script> <script src="../deps/vexflow/src/beam.js"></script> <script src="../deps/vexflow/src/vibrato.js"></script> <script src="../deps/vexflow/src/annotation.js"></script> <script src="../deps/vexflow/src/tuning.js"></script> <script src="../deps/vexflow/src/stavemodifier.js"></script> <script src="../deps/vexflow/src/keysignature.js"></script> <script src="../deps/vexflow/src/timesignature.js"></script> <script src="../deps/vexflow/src/clef.js"></script> <script src="../deps/vexflow/src/music.js"></script> <script src="../deps/vexflow/src/keymanager.js"></script> <script src="../deps/vexflow/src/renderer.js"></script> <script src="../deps/vexflow/src/stavebarline.js"></script> <script src="../deps/vexflow/src/stavevolta.js"></script> <script src="../deps/vexflow/src/staverepetition.js"></script> <script src="../deps/vexflow/src/stavesection.js"></script> <script src="../deps/vexflow/src/stavetempo.js"></script> <script src="../deps/vexflow/src/articulation.js"></script> <script src="../deps/vexflow/src/tremolo.js"></script> <script src="../deps/vexflow/src/raphaelcontext.js"></script> <script src="../deps/vexflow/src/tuplet.js"></script> <script src="../deps/vexflow/src/boundingbox.js"></script> <script src="../deps/vexflow/src/textnote.js"></script> <script src="../deps/vexflow/src/strokes.js"></script> <script src="../deps/vexflow/src/stringnumber.js"></script> <script src="../deps/vexflow/src/frethandfinger.js"></script> <!-- Fermat srcs --> <script src="../src/Fermata.js"></script> <script src="../src/Fermata.Utils.js"></script> <script src="../src/Fermata.Data.js"></script> <script src="../src/Fermata.Mapping.Clef.js"></script> <script src="../src/Fermata.Mapping.Direction.js"></script> <script src="../src/Fermata.Mapping.Connector.js"></script> <script src="../src/Fermata.Mapping.Barline.js"></script> <script src="../src/Fermata.Render.js"></script> <script src="../src/Fermata.Render.Call.js"></script> <script src="../src/Fermata.Render.SymbolSize.js"></script> <script src="../src/Fermata.Render.NoteStorage.js"></script> <script src="../src/Fermata.Render.NoteType.js"></script> <script src="../src/Fermata.Render.SoundType.js"></script> <script src="../src/Fermata.Render.PitchPitched.js"></script> <script src="../src/Fermata.Render.PitchRest.js"></script> <script src="../src/Fermata.Render.PitchUnpitched.js"></script> <script src="../src/Fermata.Render.NoteConverter.js"></script> <script src="../src/Fermata.Render.TieRenderer.js"></script> <script src="../src/Fermata.Render.GraceNote.js"></script> <script src="../src/Fermata.Render.CueNote.js"></script> <script src="../src/Fermata.Render.NormalNote.js"></script> <script src="../src/Fermata.Render.Note.js"></script> <script src="../src/Fermata.Render.RenderAttribute.js"></script> <script src="../src/Fermata.Render.Direction.js"></script> <script src="../src/Fermata.Render.Barline.js"></script> <script src="../src/Fermata.Render.Backup.js"></script> <script src="../src/Fermata.Render.PartList.js"></script> <script src="../src/Fermata.Render.Header.js"></script> <script src="../src/Fermata.Render.Score.js"></script> <script src="../src/Fermata.Drawer.js"></script> <script src="../src/Fermata.Drawer.Score.js"></script> </head> <body> <div class="container-score"> <canvas id="canvas-score" width="1700px" height="250"> <svg style="overflow: hidden; position: relative;" height="150" version="1.1" width="1700" xmlns="http://www.w3.org/2000/svg"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="20" y="40" width="0" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="20" y="50" width="0" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="20" y="60" width="0" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="20" y="70" width="0" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="20" y="80" width="0" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" fill="#000000" stroke="#000000" d="M25,70M39.0544,26.8288C39.112,26.800000000000004,39.1696,26.800000000000004,39.256,26.800000000000004C39.6016,26.800000000000004,40.0048,27.088,40.580799999999996,27.808C42.9136,30.486400000000003,44.5552,35.152,44.5552,38.9536C44.5552,39.241600000000005,44.4976,39.472,44.4976,39.760000000000005C44.2384,44.2816,42.3952,47.9968,38.7376,51.510400000000004L37.7584,52.4608L37.4128,52.8352L37.4128,52.9504L37.6144,53.8144L37.931200000000004,55.3696L38.248,56.8096C38.68,58.768,38.8528,59.775999999999996,38.8528,59.775999999999996C38.8528,59.775999999999996,38.8528,59.775999999999996,38.8528,59.775999999999996C38.8528,59.775999999999996,38.968,59.775999999999996,39.112,59.7472C39.256,59.7472,39.7168,59.6896,40.2064,59.6896C40.552,59.6896,40.8976,59.7472,41.0704,59.7472C45.1312,60.2656,48.270399999999995,63.1744,49.1632,67.264C49.336,67.9264,49.3936,68.6464,49.3936,69.3664C49.3936,73.2544,47.0608,76.9696,43.172799999999995,78.7264C42.9424,78.8704,42.855999999999995,78.89920000000001,42.855999999999995,78.89920000000001L42.855999999999995,78.928C42.855999999999995,78.928,43.028800000000004,79.5904,43.172799999999995,80.3392L43.6048,82.528L44.007999999999996,84.2848C44.2384,85.408,44.3536,86.2144,44.3536,86.9344C44.3536,87.568,44.2672,88.144,44.1232,88.8064C43.144,92.8096,39.6592,95.2,36.0304,95.2C34.2448,95.2,32.4016,94.624,30.788800000000002,93.328C29.3488,92.11840000000001,28.7152,91.024,28.7152,89.584C28.7152,87.0496,30.759999999999998,85.264,32.8912,85.264C33.64,85.264,34.3888,85.4944,35.1088,85.9264C36.3184,86.7616,36.8656,88.0288,36.8656,89.2672C36.8656,91.168,35.5408,93.03999999999999,33.2656,93.184L33.0352,93.184L33.208,93.2992C34.1584,93.7024,35.1088,93.904,36.0304,93.904C38.3632,93.904,40.552,92.72319999999999,41.8768,90.6784C42.6256,89.5264,43.028800000000004,88.1728,43.028800000000004,86.8192C43.028800000000004,86.3008,42.9424,85.7824,42.827200000000005,85.2064C42.827200000000005,85.1488,42.7408,84.688,42.6256,84.256C41.992000000000004,81.1456,41.617599999999996,79.3312,41.617599999999996,79.3312C41.617599999999996,79.3312,41.617599999999996,79.3312,41.617599999999996,79.3312C41.56,79.3312,41.4448,79.3312,41.3584,79.3888C41.0704,79.4464,40.4656,79.5904,40.2064,79.6192C39.5728,79.7056,38.968,79.7344,38.391999999999996,79.7344C32.7472,79.7344,27.5056,75.9328,25.6912,70.3168C25.2304,68.8192,24.9712,67.3216,24.9712,65.824C24.9712,62.8288,25.9216,59.8912,27.7648,57.2704C29.7808,54.419200000000004,31.7968,51.971199999999996,34.2736,49.436800000000005L35.1376,48.544L34.936,47.4784L34.5616,45.7216L34.072,43.4752C33.928,42.64,33.7552,41.833600000000004,33.7264,41.6608C33.5824,40.7104,33.496,39.7888,33.496,38.8384C33.496,35.2096,34.6768,31.724800000000002,36.8944,28.931200000000004C37.556799999999996,28.0672,38.7376,26.9152,39.0544,26.8288M40.8112,32.5312C40.7536,32.5312,40.6672,32.5312,40.580799999999996,32.5312C39.4,32.5312,37.873599999999996,33.6256,36.8368,35.2384C35.7712,36.8224,35.224000000000004,38.924800000000005,35.224000000000004,41.0848C35.224000000000004,41.6608,35.2528,42.2656,35.3392,42.870400000000004C35.4256,43.302400000000006,35.4544,43.5904,35.684799999999996,44.6272L36.088,46.4416C36.203199999999995,46.9888,36.2896,47.4208,36.2896,47.4784L36.2896,47.4784C36.3184,47.4784,37.2112,46.4992,37.4992,46.1536C40.3792,42.8992,42.1072,39.472,42.4816,36.448C42.510400000000004,36.160000000000004,42.510400000000004,35.9296,42.510400000000004,35.641600000000004C42.510400000000004,34.7488,42.3952,33.8848,42.1936,33.424C41.9632,32.9632,41.4448,32.5888,40.8112,32.5312M36.4624,54.7936C36.4048,54.3904,36.3184,54.0736,36.3184,54.016C36.3184,54.016,36.3184,54.016,36.2896,54.016C36.232,54.016,34.9936,55.456,34.129599999999996,56.464C32.6608,58.2496,31.1056,60.3808,30.472,61.4176C29.2624,63.4624,28.6576,65.7376,28.6576,67.984C28.6576,69.4528,28.9456,70.864,29.464,72.2176C31.019199999999998,76.2208,34.5904,78.7264,38.4784,78.7264C38.9392,78.7264,39.4576,78.6976,39.947199999999995,78.6112C40.580799999999996,78.496,41.3584,78.2656,41.3584,78.1792L41.3584,78.1792C41.3584,78.1792,41.300799999999995,77.8912,41.2144,77.5744L40.3792,73.456L39.7168,70.3744L39.2848,68.2432L38.824,66.1696C38.5936,64.9312,38.5072,64.6144,38.5072,64.6144C38.5072,64.6144,38.5072,64.5856,38.4784,64.5856C38.3056,64.5856,37.384,65.0464,36.9808,65.3344C35.4832,66.3712,34.705600000000004,68.0128,34.705600000000004,69.6256C34.705600000000004,71.152,35.4544,72.6784,36.8944,73.5712C37.2112,73.7728,37.3264,73.9456,37.3264,74.1472C37.3264,74.176,37.3264,74.2624,37.3264,74.2912C37.2688,74.6368,37.0672,74.7808,36.7792,74.7808C36.664,74.7808,36.519999999999996,74.752,36.3472,74.6656C33.6976,73.5136,31.912,70.7776,31.912,67.7824L31.912,67.7824C31.912,64.3264,34.072,61.3312,37.384,60.1504L37.556799999999996,60.0928L37.2688,58.6528L36.4624,54.7936M40.782399999999996,64.4128C40.552,64.384,40.321600000000004,64.384,40.1488,64.384C40.0912,64.384,40.0048,64.384,39.947199999999995,64.384L39.803200000000004,64.384L39.9184,64.9024L40.5232,67.7248L40.8976,69.568L41.300799999999995,71.3824L42.1072,75.3856L42.424,76.912C42.5392,77.3152,42.5968,77.6608,42.6256,77.6608C42.6256,77.6608,42.6256,77.6608,42.6256,77.6608C42.654399999999995,77.6608,43.144,77.3728,43.4608,77.1424C44.9296,76.1056,46.024,74.4928,46.4272,72.8224C46.571200000000005,72.2752,46.6288,71.6992,46.6288,71.152C46.6288,67.8112,44.152,64.7872,40.782399999999996,64.4128" stroke-width="0" font="10pt Arial"></path> <path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" fill="#000000" stroke="#000000" d="M64.46065,60M69.47185,41.654399999999995C69.50065000000001,41.625600000000006,69.90385,41.625600000000006,71.14225,41.625600000000006C71.51665,41.625600000000006,71.91985,41.625600000000006,72.43825,41.625600000000006L75.34705,41.625600000000006L75.43345,41.712C75.57745,41.7984,75.66385,41.9424,75.66385,42.0576C75.66385,42.2304,75.57745,42.345600000000005,75.46225,42.4608C75.43345,42.547200000000004,75.17425,42.7776,75.00145,43.0368L73.47505,44.7936L71.51665,47.0112L70.47985,48.192L68.92465,49.9776L66.87985,52.3104C66.53425,52.7424,66.15985,53.088,66.15985,53.088C66.15985,53.088,66.15985,53.088,66.15985,53.088C66.15985,53.1456,66.41905,53.1456,68.80945,53.1456L71.43025,53.1456L71.43025,51.2736C71.43025,49.3728,71.43025,49.344,71.45905,49.315200000000004C71.51665,49.2288,71.77585,48.912,72.78385,47.7312L73.18705,47.2992L73.59025,46.8672L74.19505,46.089600000000004L74.82865,45.4272L75.14545,45.024C75.26065,44.8512,75.43345,44.8224,75.57745,44.8224C75.75025,44.8224,75.89425,44.9088,75.98065,45.052800000000005C76.00945,45.1392,76.00945,45.196799999999996,76.00945,47.328C76.00945,47.8176,76.00945,48.422399999999996,76.00945,49.1424L76.00945,53.1456L76.72945,53.1456C77.39185,53.1456,77.42065,53.1456,77.50705,53.1744C77.73745,53.2608,77.85265,53.4912,77.85265,53.7504C77.85265,53.8944,77.82385,54.0672,77.70865,54.1824C77.53585,54.3264,77.50705,54.3264,76.72945,54.3264L76.00945,54.3264L76.00945,54.816C76.03825,56.2848,76.32625,56.8608,77.44945,57.4656C77.85265,57.6672,77.93905,57.7248,77.93905,58.0128C77.93905,58.2144,77.88145,58.3008,77.73745,58.416L77.65105,58.4448L73.70545,58.4448L69.78865,58.4448L69.70225,58.416C69.52945,58.3008,69.50065000000001,58.2144,69.50065000000001,58.0128C69.50065000000001,57.7248,69.52945,57.6672,69.96145,57.4656C71.08465,56.8608,71.37265000000001,56.2848,71.37265000000001,54.816L71.37265000000001,54.3264L68.06065,54.3264C67.45585,54.384,66.96625,54.384,66.56305,54.384C64.74865,54.384,64.71985000000001,54.3264,64.69105,54.3264C64.51825,54.2688,64.46065,54.096000000000004,64.46065,53.8944C64.46065,53.8944,64.46065,53.8944,64.46065,53.8944C64.46065,53.6928,64.46065,53.6928,65.03665,53.0304C67.45585,50.0928,69.15505,45.8304,69.15505,42.432C69.15505,41.9136,69.24145,41.7408,69.47185,41.654399999999995M71.19985,60.0288L71.22865,60.0288L71.14225,60.0288L71.19985,60.0288M71.19985,40.617599999999996L71.22865,40.617599999999996L71.14225,40.617599999999996L71.19985,40.617599999999996" stroke-width="0" font="10pt Arial"></path> <path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" fill="#000000" stroke="#000000" d="M64.46065,80M69.47185,61.654399999999995C69.50065000000001,61.625600000000006,69.90385,61.625600000000006,71.14225,61.625600000000006C71.51665,61.625600000000006,71.91985,61.625600000000006,72.43825,61.625600000000006L75.34705,61.625600000000006L75.43345,61.712C75.57745,61.7984,75.66385,61.9424,75.66385,62.0576C75.66385,62.2304,75.57745,62.345600000000005,75.46225,62.4608C75.43345,62.547200000000004,75.17425,62.7776,75.00145,63.0368L73.47505,64.7936L71.51665,67.0112L70.47985,68.19200000000001L68.92465,69.9776L66.87985,72.3104C66.53425,72.7424,66.15985,73.088,66.15985,73.088C66.15985,73.088,66.15985,73.088,66.15985,73.088C66.15985,73.1456,66.41905,73.1456,68.80945,73.1456L71.43025,73.1456L71.43025,71.2736C71.43025,69.3728,71.43025,69.344,71.45905,69.3152C71.51665,69.2288,71.77585,68.912,72.78385,67.7312L73.18705,67.2992L73.59025,66.8672L74.19505,66.0896L74.82865,65.4272L75.14545,65.024C75.26065,64.8512,75.43345,64.8224,75.57745,64.8224C75.75025,64.8224,75.89425,64.9088,75.98065,65.0528C76.00945,65.1392,76.00945,65.1968,76.00945,67.328C76.00945,67.8176,76.00945,68.4224,76.00945,69.1424L76.00945,73.1456L76.72945,73.1456C77.39185,73.1456,77.42065,73.1456,77.50705,73.1744C77.73745,73.2608,77.85265,73.4912,77.85265,73.7504C77.85265,73.8944,77.82385,74.0672,77.70865,74.1824C77.53585,74.3264,77.50705,74.3264,76.72945,74.3264L76.00945,74.3264L76.00945,74.816C76.03825,76.2848,76.32625,76.8608,77.44945,77.4656C77.85265,77.6672,77.93905,77.7248,77.93905,78.0128C77.93905,78.2144,77.88145,78.3008,77.73745,78.416L77.65105,78.4448L73.70545,78.4448L69.78865,78.4448L69.70225,78.416C69.52945,78.3008,69.50065000000001,78.2144,69.50065000000001,78.0128C69.50065000000001,77.7248,69.52945,77.6672,69.96145,77.4656C71.08465,76.8608,71.37265000000001,76.2848,71.37265000000001,74.816L71.37265000000001,74.3264L68.06065,74.3264C67.45585,74.384,66.96625,74.384,66.56305,74.384C64.74865,74.384,64.71985000000001,74.3264,64.69105,74.3264C64.51825,74.2688,64.46065,74.096,64.46065,73.8944C64.46065,73.8944,64.46065,73.8944,64.46065,73.8944C64.46065,73.6928,64.46065,73.6928,65.03665,73.0304C67.45585,70.0928,69.15505,65.8304,69.15505,62.432C69.15505,61.9136,69.24145,61.7408,69.47185,61.654399999999995M71.19985,80.0288L71.22865,80.0288L71.14225,80.0288L71.19985,80.0288M71.19985,60.617599999999996L71.22865,60.617599999999996L71.14225,60.617599999999996L71.19985,60.617599999999996" stroke-width="0" font="10pt Arial"></path> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="20" y="40" width="0.5" height="40.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="0" y="40" width="0.5" height="40.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" fill="#000000" stroke="#000000" d="M90,90M97.49664,84.96576C97.7976,84.91104,98.09855999999999,84.91104,98.39952,84.91104C102.7224,84.91104,106.33392,86.82624,106.85376,89.39808C106.88112,89.64432,106.93584,89.8632,106.93584,90.02736C106.93584,92.84544,103.21488,95.11632,98.42688,95.11632C93.63888,95.11632,90,92.79072,90,90.02736C90,89.69904,90.02736,89.37072,90.1368,89.01504C90.79344,86.8536,93.85776,85.18464,97.49664,84.96576M97.90704,85.59504C97.77024,85.56768,97.57872,85.56768,97.44192,85.56768C95.71824,85.56768,94.67856,87.04512,94.67856,88.87824C94.67856,89.8632,94.97952,90.93024,95.6088,91.99728C96.64848,93.63888,98.15328,94.45968,99.4392,94.45968C100.5336,94.45968,101.49119999999999,93.88512,101.92896,92.68128C102.12048,92.1888,102.20256,91.69632,102.20256,91.17648C102.20256,88.71408,100.31472,85.97808,97.90704,85.59504" stroke-width="0" font="10pt Arial"></path> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="87" y="90" width="22" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10pt; line-height: normal; font-family: Arial;" x="87" y="90" width="22" height="0.5" r="0" rx="0" ry="0" fill="#000000" stroke="#000000" stroke-width="0.3" font="10pt Arial"></rect> </svg> </canvas> </div> <script> // Hello World var score = {"score-partwise":{"$version":"3.0","part-list":{"score-part":[{"$id":"P1","part-name":"Music"}]},"part":[{"$id":"P1","measure":[{"$number":"1","attributes":[{"divisions":"1","key":{"fifths":"0"},"time":{"beats":"4","beat-type":"4"},"clef":{"sign":"G","line":"2"}}],"note":[{"pitch":{"step":"C","octave":"4"},"duration":"4","type":"whole"}]}]}]}}; var data = new Fermata.Data(score); var render = new Fermata.Render(data); render.renderAll(); var drawer = new Fermata.Drawer(data, document.getElementById('canvas-score')); drawer.drawAll(); </script><i title="Raphaël Colour Picker" style="display: none; color: black;"></i> </body> </html> 

Et il n'y a pas de CSS lié à la page.

Si vous ajoutez des éléments SVG via JavaScript, vous devez spécifier l'espace de noms « http://www.w3.org/2000/svg » pour chaque élément.

Exemple

  path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 

L'erreur était évidente, j'ai mis mon tag svg dans une étiquette de toile (je viens de passer du dessin de toile au dessin de svg) et cela ne peut pas fonctionner dans n'importe quel navigateur.

La réponse: Modifiez simplement la balise de toile à une balise div et ça fonctionne comme un charme.