cocoggu
Reputation: 391
SVG elements appears in DOM but are invisible on screen
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 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 there is no CSS linked to the page.
Upvotes: 5
Views: 5196
Answers (2)
cocoggu
Reputation: 391
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.
Upvotes: 2
Taron Mehrabyan
Reputation: 2229
If you add SVG elements via JavaScript you must specify namespace 'http://www.w3.org/2000/svg' for each element.
example
path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
Upvotes: 12
Related Questions
- How to access SVG elements with JavaScript?
- Why svg elements created from JavaScript are not visible?
- SVG elements appearing in DOM, but not visible
- SVG element not visible on screen, can see element added in console
- Initializing Raphael with an svg element
- Not displayed SVG elements
- Raphael: graphic elements disappearing
- SVG file using raphael is not rendered
- When I convert an SVG to a Raphael JS object, the paths don't show up
- Raphaël - SVG on top of HTML