0

i have an image on my canvas in Raphael and i use clip-rect to crop parts that i dont need. Now i have generated a svg with raphael.serialize plugin, but i cannot get clip-rect working. thet part from php script that loop over created json:

for ($i=0; $i <= count($json); $i++) {
            if ($json[$i]['type'] == "image" ) {
                $base64 = base64_encode(file_get_contents($json[$i]['src']));
                $output .= '<image overflow="visible" x="'.$json[$i]["x"].'" y="'.$json[$i]["y"].'" width="'.$json[$i]["width"].'"  clip-rect="'.$json[$i]["clip"].'" height="'.$json[$i]["height"].'" transform="'.$json[$i]["transform"].'" preserveAspectRatio="none" xlink:href="data:image/png;base64,'.$base64.'"></image>';
          }
    }

and here some part of modified serialize plugin:

var object = {
                  type: node.type,
                  width: node.attrs['width'],
                  height: node.attrs['height'],
                  x: node.attrs['x'],
                  y: node.attrs['y'],
                  src: node.attrs['src'],
                  clip: node.attrs['clip-rect'],
                  transform: node.transformations ? node.transformations.join(' ') : ''
                }

i have tried to use viewBox="'.$json[$i]["clip"].'" and clip="'.$json[$i]["clip"].'" but i get no result.

how can i get this thing working?

gerpaick
  • 801
  • 2
  • 13
  • 36

1 Answers1

1

There is no 'clip-rect' attribute in SVG. There is however a 'clip-path' attribute, which is what Raphaël actually uses (clip-rect is just an abstraction/limitation). Note that you will need to serialize the <clipPath> that defines the clipping region too.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • i have changed my php script to get ` clip-path="'.$json[$i]["clip-rect"].'", but i cannot get the result. can you give me some guideline to resolve my problem. i am newbie in svg – gerpaick Nov 15 '11 at 13:29
  • Looking at what raphael.serialize does it doesn't seem to handle serializing clip-paths. I'm not really sure why the author of that extension didn't just use XMLSerializer on the toplevel svg element, then you'd get everything the browser sees. See http://stackoverflow.com/questions/227208/what-is-the-best-way-to-serialize-svg-from-the-client-dom/227754#227754 – Erik Dahlström Nov 15 '11 at 13:45
  • You're partly right, XMLSerializer seems to have been added in IE9 (along with svg). Anyway your PHP script seems to be generating svg and should make sure to do so properly, and you're going to have to modify both raphael.serialize and the PHP script to get clipping to work. – Erik Dahlström Nov 16 '11 at 14:26