Home/ Questions/Q 6793337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:05:19+00:00

With the code below I add a DIV to the page, to which I

  • 0

With the code below I add a DIV to the page, to which I add a
Raphael.Image thats been rotated.

The problem is that while the DIV and SVG object is the same size the
SVG dont get placed in the middle of the DIV but instead clipped
outside the DIVs viewport.

Does anyone have a solution to this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/raphael2.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#btOK").click(function () {
            addImage('div8D8EC86F-8AF4-6F13-7595-066F96F06C58');
        });
    });
    function addImage(guid) {
        $("#divCanvas #" + guid).remove();

        //build div
        var $div = $("<div></div>").attr("id", guid).css({ 'position': 'absolute', 'top': '50px', 'left': '400px','border': 'solid 1px #000' });

        //add div to canvas
        $("#divCanvas").append($div);

        //image info
        var img = 'http://raphaeljs.com/bd.jpg';
        var width = 320;
        var height = 240;

        //area the paper needs to fit the rotated image
        var area = Math.sqrt((width * width) + (height * height));

        //angle
        var angle = 49;

        //paper
        var paper = Raphael(guid, area, area);

        //add and rotate image
        var img = paper.image(img, 0, 0, width,height).transform("r" + angle);

        //get image box info
        var bb = img.getBBox();

        //shrink the papers area
        paper.setSize(bb.width, bb.height);
    }
    </script>
</head>
<body>
<button id="btOK">Add image object</button>
<hr />
<div id="divCanvas"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks Ed Davies for the solution:

    var paper = Raphael(guid, area, area);
var img = paper.image(img, 0, 0, width, height).transform("r" + angle);
var bb = img.getBBox();
paper.setViewBox(bb.x, bb.y, bb.width, bb.height, true);
    • 0