PHP-Class SVG + jQuery-AJAX

Question

我想重现这个小例子https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion使用我自己制作的php中的一个类。 这是我的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来到外面和外面。任何想法都会令人满意。

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>