Question

我在拉斐尔的画布上有一个图像，我使用剪裁直接裁剪我不需要的部分。现在我已经使用raphael.serialize插件生成了一个svg，但是我无法使用clip-rect工作。来自php脚本的部分循环创建了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>';
          }
    }

这里是修改后的序列化插件的一部分：

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

我试图使用viewBox =“'。$ json [$ i] [”clip“]。'”和clip =“'。$ json [$ i] [”clip“]。'”但我得到了没有结果。

我怎么能让这个东西工作？

Answer 1

SVG中没有'clip-rect'属性。然而，有一个'clip-path'属性，这是Raphaël实际使用的属性（clip-rect只是一个抽象/限制）。请注意，您还需要序列化定义剪切区域的<clipPath>。

raphael的clip-rect属性，用于获取生成的svg图像的结果

1 个答案: