In-place-modifying an SVG image file via SVGDocument object


Links:
SVG scripting in Mozilla (Firefox)
https://developer.mozilla.org/en/SVG/Scripting

W3C 'draft' on SVG DOM
http://www.w3.org/TR/SVG/svgdom.html







Script Code

window.updateSVGColor=function(){
  // getting the HTML DOMElement for the object tag
  var obj = findById("test1")

  // fetching the SVGDocument
  // typeof 'svg': SVGDocument
  var svg = obj.getSVGDocument();
  
  // getting the inner part of the speech bubble (id="AAA")
  // typeof 'el': SVGPathElement
  var el  = svg.getElementById("AAA");

  var el2 = findById("txt_colorset")

  // changing the "fill" attribute, e.g. to an RGB-Color (#000000)
  el.setAttribute("fill",el2.value);
}


SVG Quelltext
<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 15.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="462.845px" height="313.774px" viewBox="0 0 462.845 313.774" enable-background="new 0 0 462.845 313.774"
	 xml:space="preserve">

<polygon fill="#FFFFFF" id="BBB" stroke="#000000" stroke-miterlimit="10" points="868.058,267.222 868.058,267.222 853.058,267.222 
	853.058,267.222 853.058,267.222 853.058,267.222 868.058,267.222 868.058,267.222 "/>

<path fill="#CE3C3C" id="AAA" stroke="#000000" stroke-miterlimit="10" d="M456.058,220.222c0,6.627-5.373,12-12,12H207.793l-21.832,71.24
	l-13.894-71.24H20.058c-6.627,0-12-5.373-12-12v-202c0-6.627,5.373-12,12-12h424c6.627,0,12,5.373,12,12V220.222z"/>

</svg>

Kommentare