admin管理员组文章数量:1341885
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.
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
canvasis 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
2 Answers
Reset to default 12If 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.
本文标签： javascriptSVG elements appears in DOM but are invisible on screenStack Overflow
版权声明：本文标题：javascript - SVG elements appears in DOM but are invisible on screen - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743629896a2512930.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论