Geek Answers Handbook

SVG elements appear in the DOM but are invisible on the screen

I am trying to draw a stave with SVG using Vexflow and Raphael.js , and when I load the page, the SVG elements appear in the DOM, but they do not appear on the screen.

I checked if there is any CSS rule that could hide the elements, but they aren't there. Also tested on different browsers, different versions of lib, nothing ...

Here is the SVG that appeared in the 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>

And CSS is not attached to the page.

+4
source share
2 answers

The error was obvious, I put my svg tag inside the canvas tag (I just switched from drawing the canvas to the svg picture), and it cannot work in any browser.

Answer: just change the canvas tag to the div tag and it works like a charm.

+2
source

If you add SVG elements via JavaScript, you must specify the http://www.w3.org/2000/svg 'namespace for each element.

Example

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

More articles:


All Articles