Home/ Questions/Q 9298765
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T22:24:07+00:00

I am trying to reproduce this litttle exemple https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion using a class in php

  • 0

I am trying to reproduce this litttle exemple https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion using a class in php that i made by myself.
This is my PHP class

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."/>";        
        }       

    }

this is how a call my class

$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);

When I see on xdebug the $svgFrame is as expected. But when see on browser I have that http://jsfiddle.net/igoralves1/qd5p9/ . I dont know why it not works. And when I use AJAX the comes outside and both outside . Any idea will be apreciate.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have some empty tags there like <circle ... /> and <animateMotion ... />. If you indent the content better you’ll see those problems. I think the main problem is 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>
    • 0