2. Algorithm
  3. javascript - SVG elements appears in DOM but are invisible on screen - Stack Overflow

javascript - SVG elements appears in DOM but are invisible on screen - Stack Overflow

admin2025-04-03  0

I try 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 don't appear on the screen.

I checked if there is any CSS rule which could hide the elements, but there isn't any.. Also checked on different browsers, different lib versions, nothing...

Here is the SVG appearing 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 Unpiled 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="">
                <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 there is no CSS linked to the page.

I try 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 don't appear on the screen.

I checked if there is any CSS rule which could hide the elements, but there isn't any.. Also checked on different browsers, different lib versions, nothing...

Here is the SVG appearing 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 Unpiled 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/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 there is no CSS linked to the page.

  • javascript
  • svg
  • raphael
Share Improve this question edited Jun 3, 2015 at 5:22 royhowie 11.2k14 gold badges53 silver badges67 bronze badges asked Feb 12, 2013 at 16:17 cocoggucocoggu 3917 silver badges18 bronze badges 5
  • 1 I put your code into a jsFiddle: jsfiddle/mori57/mErmF Note that I told it to reference Raphael 2.0... if you have to use an earlier version of Raphael for some reason, you can switch it there and see if it still works. As you can see, it seems to work, there, to some degree (I don't see any bar-lines, for example), so I'm guessing there's something else wrong in your markup and/or includes. Can you post more of your surrounding HTML? Is your browser throwing any Javascript or loading errors in the console when you try to run your script? – Jason M. Batchelor Commented Feb 12, 2013 at 16:25
  • @mori57: Thank you a lot ! I just edit my post to put all the surrounding code and in fact it don't work in jsFiddle.. – cocoggu Commented Feb 12, 2013 at 16:51
  • 2 I've never used vexFlow, but an SVG nested in a canvas element seems to indicate that it's a fallback in case canvas is not supported. Does it render anything in the canvas? – methodofaction Commented Feb 12, 2013 at 17:17
  • What browser(s) are you testing this in? Side-note, but you probably shouldn't name a class and an ID the same thing... in this case, not a biggie (getElementById won't pick up the class name), but in larger apps, it can get confusing. – Jason M. Batchelor Commented Feb 12, 2013 at 17:38
  • Ok thank you again I just changed the canvas tag to a div and it works perfectly ! So obvious i'm a little shameful... – cocoggu Commented Feb 12, 2013 at 17:40
Add a ment  | 

2 Answers 2

Reset to default 12

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

example

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

The error was obvious, I put my svg tag inside a canvas tag (I just switched from canvas drawing to svg drawing) and it can't work in any browser.

The answer : Just change the canvas tag to a div tag and it works like a charm.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743629898a213883.html

javascriptSVG elements appears in DOM but are invisible on screenStack Overflow

最新回复(0)