Question

我的代码适用于同一页面中.svg文件的编辑属性

＆＃13;

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]);
  }
}

＆＃13;

<?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()"/>

＆＃13;

但是我需要在{。1}}添加.svg文件并将其编辑为

img

我需要根据用户操作对facebook.svg页面进行更改。

感谢。

Answer 1

使用对象标签

<object id="img1" type="image/svg+xml" data="img.svg"/>

Answer 2

设置图片

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

使用php创建你的svg

<?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>

更新您的图片

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

编辑其他页面的{h}属性

2 个答案: