CODEWITHSUNDEEP
javascripthtmlsvgraphael
Chuck Norris
Chuck Norris

Reputation: 15200

How can I make svg to start from another position of div

In Raphael JS documentation, there are examples how make svg, but only at the top left corner.

// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);

How can I make it to start not from left top corner, but for example from x=0 and y=50?

Upvotes: 1

Views: 3676

Answers (3)

austincheney
austincheney

Reputation: 1199

This is probably less about the CSS and more about the SVG. You can define the container in HTML using CSS, but inside that contain it is best to make your definitions directly relevant to the SVG data. Particular to this case are these attributes:

  • viewBox
  • preserveAspectRatio

On that second attribute you will want the value "xMinYMid meet". This will cause the SVG image to render from the vertical center and left edge of its available canvas. You can also remove the width and height attributes on your SVG as such are counter-intuitive to the rendering of vector graphics.

I have successfully integrated SVG graphics into three places of a slideshow app, http://mailmarkup.org/slideshow.xhtml

  • The quote graphic that appears at the beginning of quotes
  • The logo in the footer
  • The SMTP and HTTP diagrams on a slide mid way through

If you shrink or grow the browser window the graphics will stay in their correct location and will grow relative to the text.

Upvotes: 2

Mujtaba Haider
Mujtaba Haider

Reputation: 1650

Give your svg the relative position attribute of css, and by top/bottom and left/right you can set the svg according to your desired location inside the div.

<svg id="mSvg" height="539" version="1.1" width="620" xmlns="http://www.w3.org/2000/svg">
#msvg {
overflow: hidden;
 top: 40px;
 left: 100px;
 position: relative;
}

Upvotes: 0

czerasz
czerasz

Reputation: 14280

Try this:

#notepad {
  position:relative;
}
  #notepad svg {
    position:absolute;
    top:50px; left:0;
  }

Upvotes: -1

Related Questions