raphaelのclip-rectプロパティを使用して、生成されたsvg画像の結果を取得します。

Question

私はキャンバス上にRaphaelの画像を持っています。今私はraphael.serializeプラグインとsvgを生成したが、私はクリップ直腸作業を得ることができません。 。私は、ビューボックス= "」$のJSON [$ I]を使用しようとしました

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(' ') : '' 
       } 

：

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>'; 
      } 
    } 

とここで変更シリアル化プラグインの一部：作成したJSONをループすることをPHPスクリプトからthetの一部["clip"]。 "" clip = "'$ json [$ i] [" clip "]。" "しかし、結果は得られません。

どうすればこの問題を解決できますか？

Answer 1

SVGには'clip-rect'という属性はありません。しかし、'clip-path'属性があります。これはRaphaëlが実際に使用するものです（クリップレットは単に抽象化/制限です）。クリッピング領域を定義する<clipPath>もシリアル化する必要があることに注意してください。