Question

我通过ajax jQuery获取svg内容，缺少宽度和高度我需要从ajax jQuery内容添加宽度和高度。

代码：

 $jd.ajax({
                        type: "POST",
                        data: item,
                        url: siteURL + "ajax.php?type=svg",
                        dataType: "json",
                        success: function(data){
                        console.log("came");
                                o.width         = data.size.width;
                                o.height        = data.size.height;
                                o.file          = data.info;                        
                                o.svg           = jQuery.parseHTML(data.content);
design.item.create(o);
}

输出：

  <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 72 72">
<defs>
<style>
.cls-1{fill-rule:evenodd;}
</style>
</defs>
<title>dddd 19</title>
<path class="cls-1" d="M32.23,68.81C39.65,53.75,5.28,51,1.37,30.05-1,17.52,7.93,4.12,23.55,6.41c4.57.64,10,3.48,12.73,7.06a21.49,21.49,0,0,1,21-8.09c9.16,1.81,15.51,10.3,14,21.57-1.68,12.8-32.18,41.63-39.12,41.86Z" fill="#000000"></path>
</svg>

正如您所见，上面的代码缺少宽度和高度。如何根据视框值

将宽度和高度添加为'72px'

预期产出：

<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" id="Layer_1" data-name="Layer 1" viewBox="0 0 72 72">
<defs>
<style>
.cls-1{fill-rule:evenodd;}
</style>
</defs>
<title>dddd 19</title>
<path class="cls-1" d="M32.23,68.81C39.65,53.75,5.28,51,1.37,30.05-1,17.52,7.93,4.12,23.55,6.41c4.57.64,10,3.48,12.73,7.06a21.49,21.49,0,0,1,21-8.09c9.16,1.81,15.51,10.3,14,21.57-1.68,12.8-32.18,41.63-39.12,41.86Z" fill="#000000"></path>
</svg>

Answer 1

在SVG.php文件中，我添加了一个函数

 public function addAttribute($key, $value){
    return $this->xml->addAttribute($key, $value);
}

之后在ajax.php文件中

public function getSVG($post)
    {

        $art_id     = $post['clipart_id'];          
        $type       = $post['file_type'];           
        $medium     = $post['medium'];          
        $url        = $post['url'];
        $file_name  = $post['file_name'];
        $colors     = $post['colors'];


        $file   = $url . 'print/' . $file_name; 



        include_once (ROOT .DS. 'includes' .DS. 'libraries' .DS. 'svg.php');


        $data = array();
        $size = array();

        $size['height'] = 100;
        $size['width'] = 100;


        $xml = new svg($file, true);


        // get width, heigh of svg file
        $width = $xml->getWidth();
        $height = $xml->getHeight();



        if(empty($width)&& empty($height)){

            /** @var mixed $newWidth */
            $newWidth = $xml->get_view_attr_width();    
            $newHeight  = $xml->get_view_attr_height(); 

        }else{
        // calculated width, height
        $newWidth = substr($xml->getWidth(),0,-2)*96;
        /** @var mixed $newHeight */
        $newHeight = substr($xml->getHeight(),0,-2)*96;
        }



        // set width, height
        $xml->setWidth ($newWidth.'px');
        $xml->setHeight ($newHeight.'px');

        $xml->addAttribute("width", $xml->get_view_attr_width());
$xml->addAttribute("height", $xml->get_view_attr_height());

        //print_r($xml->asXML());
        //exit;

        $data['content']        = $xml->asXML();
        $data['info']['type']   = 'svg';                
        $data['info']['colors'] = json_decode($colors);

        $data['size']['width']  = $newWidth . 'px';
        $data['size']['height'] = $newHeight . 'px';




        return $data;
    }

如何使用jquery从ajax svg内容中添加宽度和高度？

1 个答案: