Search code examples
javascriptcsssvgsvg.js

Javascript with svg.js: Unable to eliminate viewbox offset from top left corner

I am trying to draw an image using JavaScript and svg.js library. The image always comes out with an offset of about 8 pixels from the top and 8 pixels from the left edge of the browser window. I would like the image to start at point (0,0) of the browser window. In other words, it should be aligned at the extreme top left of the browser window and not at some offset. I have tried many different settings but nothing I do seems to help eliminate this offset. I am listing below the latest version of the code I am using. Can somebody please help? Also, is it possible to achieve this effect without using css?

<!DOCTYPE html>
<head>
<meta charset=utf-8>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<style>
body {
    width: 100%;
    padding: 0px;
}
</style>
</head>
<body>
<div id="drawCurve"></div>
<script id="drawCurve-script">
    var s = SVG('drawCurve').size(500,500).viewbox(0,0,500,500);
    var p=s.path().attr({
        id: 'path0',
        padding: '0px',
        fill: 'white',
        d: 'M0 0 C200 120 300 120 300 100'
    });
    p.stroke({
        color: 'black',
        width: 1,
        padding: '0px'
    });
</script>
</body>

Image of a curve

Solution

  • Add margin:0 to your body tag:

    body {
  width: 100%;
  padding: 0px;
  margin: 0;
}