raphael的clip-rect属性可在生成的svg图像上获取结果

问题描述

我在Raphael的画布上有一个图像，我使用clip-rect裁剪不需要的部分.现在，我已经用raphael.serialize插件生成了一个svg，但是我无法进行clip-rect的工作. php脚本中的thet部分循环遍历创建的json:

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

我尝试使用viewBox ='.$ json [$ i] [" clip].'"和clip ='.$ json [$ i] [" clip].'"，但我得到了没有结果.

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?

推荐答案

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

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.

这篇关于raphael的clip-rect属性可在生成的svg图像上获取结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！