raphael's clip-rect property to get result on generated svg image

问题

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?

回答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.

来源：https://stackoverflow.com/questions/8129995/raphaels-clip-rect-property-to-get-result-on-generated-svg-image