PHP-类SVG + jQuery-AJAX

Question

我试着用我自己做的一个https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion类来重现这个小例子。这是我的PHP类

class SVG{//https://developer.mozilla.org/en-US/docs/SVG
              //http://www.w3.org/TR/SVG/Overview.html

static function SVG_Frame(array $SVGatt,$conteudoSVG)    {//http://www.w3.org/TR/SVG/struct.html#NewDocument          
            $attrSVG=null;        
            foreach ($SVGatt as $key => $value) {
                if(is_string($key)){
                    $attrSVG .= " ".$key."=\"".$value."\"";
                }            
            }        
            return"<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" ".$attrSVG.">".$conteudoSVG."</svg>";
        }
static function SVG_Circle(array $circleAtt){//http://www.w3.org/TR/SVG/shapes.html#CircleElement

            $attrCircle=null;
            $conteudoCircle=null;
            foreach ($circleAtt as $key => $value) {

                if(is_string($key)){
                    $attrCircle .= " ".$key."=\"".$value."\"";
                }
                else{
                    if(is_array($value)){
                        foreach ($value as $key2 => $value2) {
                            $conteudoCircle.=$value2;
                        }
                    }
                    else{
                        $conteudoCircle=$value;
                    }

                }
            }

            if($conteudoCircle==""){            
                return "<circle".$attrCircle."/>";
            }else{            
                return "<circle".$attrCircle."/>".$conteudoCircle."</circle>";
            }

        }
static function SVG_AnimateMotion(array $animateMotAtt) {//http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement                                                                 //https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion
            $attrAninMot=null;
            $conteudoAninMot=null;
            foreach ($animateMotAtt as $key => $value) {

                if(is_string($key)){
                    $attrAninMot .= " ".$key."=\"".$value."\"";
                }
                else{
                    if(is_array($value)){
                        foreach ($value as $key2 => $value2) {
                            $conteudoAninMot.=$value2;
                        }
                    }
                    else{
                        $conteudoAninMot=$value;
                    }                
                }
            }     
            return"<animateMotion ".$attrAninMot."/>".$conteudoAninMot."</animateMotion>";

        }    
static function SVG_MPath(array $mpathtAtt) {//http://www.w3.org/TR/SVG/animate.html#InterfaceSVGMPathElement
//https://developer.mozilla.org/en-US/docs/SVG/Element/mpath
            $attrMPath=null;
            foreach ($mpathtAtt as $key => $value) {            
               $attrMPath .= " ".$key."=\"".$value."\"";                        
            }     
            return"<mpath ".$attrMPath."/>";        
        }    
static function SVG_Path(array $pathtAtt) {//https://developer.mozilla.org/en-US/docs/SVG/Tutorial/Paths
//http://www.w3.org/TR/SVG/paths.html
            $attrPath=null;
            foreach ($pathtAtt as $key => $value) {            
               $attrPath .= " ".$key."=\"".$value."\"";                        
            }     
            return"<path ".$attrPath."/>";        
        }       

    }

这就是如何调用我的类

$data="M 10,110 
               A 120,120 -45 0,1 110 10 
               A 120,120 -45 0,1 10,110";
$path=  SVG::SVG_Path(array(id=>path1,stroke=>"gray",fill=>"none",d=>$data ));
        $circulo1=SVG::SVG_Circle(array(cx=>10,cy=>110,r=>3,fill=>lightgrey));
        $circulo2=SVG::SVG_Circle(array(cx=>110,cy=>10,r=>3,fill=>lightgrey));

        $mpath=  SVG::SVG_MPath(array("xlink:href"=>"#path1"));
        $animate=  SVG::SVG_AnimateMotion(array(dur=>"6s",repeatCount=>indefinite,$mpath));
        $circuloRed = SVG::SVG_Circle(array(cx=>"",cy=>"",r=>10,fill=>red,$animate));
        $svgFrame = SVG::SVG_Frame(array(width=>500,height=>500), $circulo1.$circulo2.$path.$circuloRed);

当我在xdebug上看到$svgFrame时，它与预期的一样。但当在浏览器上看到时，我有那个http://jsfiddle.net/igoralves1/qd5p9/。我不知道为什么它不能工作。当我使用AJAX时，AJAX来自外部，两者都在外部。任何想法都会被忽略。

Answer 1

这里有一些空标签，比如<circle ... />和<animateMotion ... />。如果你把内容缩进得更好，你就会看到这些问题。我认为主要的问题是return "<circle".$attrCircle."/>".$conteudoCircle."</circle>";

<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  width="500" height="500">
<circle cx="10" cy="110" r="3" fill="lightgrey"/>
<circle cx="110" cy="10" r="3" fill="lightgrey"/>

<path  id="path1" stroke="gray" fill="none" d="M 10,110 
               A 120,120 -45 0,1 110 10 
               A 120,120 -45 0,1 10,110"/>
<circle cx="" cy="" r="10" fill="red">
    <animateMotion  dur="6s" repeatCount="indefinite">
        <mpath  xlink:href="#path1"/>
    </animateMotion>
</circle>
</svg>