Edit html attribute of another page

I have code which is work for edit attributes of .svg file in same page

function changeInnerColor() {
    	var y = document.getElementsByClassName("inner");
    	var j;
    	for (j in y){
    	 	y[j].setAttribute("fill","#494949");
    	 	console.log(y[j]);
    	}
}

function changeOuterColor(){
  var x = document.getElementsByClassName("outer");
  var i;
  for (i in x){
    x[i].setAttribute("fill","#ff0");
    console.log(x[i]);
  }
} 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
	<g id="Shape_1_copy_3_18_">
		<ellipse fill="#0481D9" class="outer" cx="65" cy="65" rx="64" ry="64.018"/>
	</g>
	<g id="Shape_8">
		<path fill="#FFFFFF" class="inner" d="M70.139,46.547h8.828V35.615h-8.828c-7.303,0-13.24,6.436-13.24,14.346v5.517H48.07v10.967h8.828v26.552
			h11.033V66.444h11.035V55.478H67.932v-5.621C67.932,47.963,69.102,46.547,70.139,46.547z"/>
	</g>
</g>
</svg>


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
	<g id="Shape_1_copy_3_22_">
		<ellipse fill="#EE3849" class="outer" cx="65" cy="65" rx="64" ry="64.017"/>
	</g>
	<g id="Shape_153">
		<path fill="#FFFFFF" class="inner" d="M74.044,52.203H63.407c-2.937,0-5.318,2.378-5.318,5.318c0,2.934,2.382,5.318,5.318,5.318h10.637
			c2.46,0,5.318,4.061,5.318,9.307c0,5.131-4.771,9.307-10.637,9.307h-5.318c-5.864,0-10.637-4.772-10.637-10.637V44.225
			c0-2.94-2.381-5.318-5.318-5.318c-2.937,0-5.318,2.378-5.318,5.318v26.592c0,11.729,9.544,21.273,21.273,21.273h5.318
			c11.73,0,21.273-8.948,21.273-19.943C89.999,61.146,82.842,52.203,74.044,52.203z"/>
	</g>
</g>
</svg>

<input id="button1" type="button" value="Change Inner Color" onclick="changeInnerColor()"/>
<input id="button2" type="button" value="Change Outer Color" onclick="changeOuterColor()"/>

But i need to add that .svg file with img and edit it like

<img scr="facebook.svg"> 

And i need make changes into facebook.svg page as per user action.

THANKS.

Answers 1

  • Set your image

    <img scr="facebook.php?innercolor=FFFFF&outercolor=0481D9" id="myImage"> 
    

    Create your svg using php

    <?php
        header('Content-Type: image/svg+xml ');
        $innercolor = $GET['innercolor'];
        $outercolor = $GET['outercolor'];
    ?>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
         <g>
         <g id="Shape_1_copy_3_22_">
              <ellipse fill="#<?php echo $innercolor; ?>" class="outer" cx="65" cy="65" rx="64" ry="64.017"/>
         </g>
         <g id="Shape_153">
              <path fill="#<?php echo outercolor;  ?>" class="inner" d="M74.044,52.203H63.407c-2.937,0-5.318,2.378-5.318,5.318c0,2.934,2.382,5.318,5.318,5.318h10.637
            c2.46,0,5.318,4.061,5.318,9.307c0,5.131-4.771,9.307-10.637,9.307h-5.318c-5.864,0-10.637-4.772-10.637-10.637V44.225
            c0-2.94-2.381-5.318-5.318-5.318c-2.937,0-5.318,2.378-5.318,5.318v26.592c0,11.729,9.544,21.273,21.273,21.273h5.318
            c11.73,0,21.273-8.948,21.273-19.943C89.999,61.146,82.842,52.203,74.044,52.203z"/>
    </g>
    

    Update your image

    function changeInnerColor() {
        var y = document.getElementsByID("myImage");
        y.src = "facebook.php?innercolor=494949&outercolor=0481D9";
    }
    
    function changeOuterColor(){
        var x = document.getElementsByID("myImage");
        x.src = "facebook.php?innercolor=494949&outercolor=ff0";    
    } 
    

Related Articles