Home/ Questions/Q 7429041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T08:54:24+00:00

In Raphael JS documentation, there are examples how make svg, but only at the

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0