Auch hier zeigt sich die Verschwandschaft zwischen SVG und XHTML/HTML5. Mit
httpRequests können externe Inhalte in Elemente des Dokuments geladen werden.
<?php
header("Content-Type: image/svg+xml");
<!-- Javascript / Ecma-script -->
<script language="Javascript"><![CDATA[
//// Create Request Object
function createRequestObject() {
var ro;
var browser = navigator.appName;
//// Check for Adobe SVG Viewer in Explorer
if(browser == "Adobe SVG Viewer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
return ro;
}
var http = createRequestObject();
//// Send Request Funktion
function sndReq(ausgabe) {
http.open('POST', 'content.php');
http.onreadystatechange = handleResponse;
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//// Variable ausgabe (mit Inhalt My Text wird versandt)
http.send('NewAJAXVariable ='+ ausgabe);
}
//// Request verarbeiten
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
if(response.indexOf('|' != -1)) {
update = response.split('|');
//// Inhalt von content.php wird in Container content geladen
svgdoc.getElementById("content").getFirstChild().setData(response);
}}
}
]]></script>
<svg>
/// Textcontainer mit default Inhalt Old Text
<text id="content" transform="translate(90 90)" font-size="11" fill="#343434" >Old Text</text>
/// Button mit Javascript Funktionsaufruf und Inhalt New Text
<rect width="80" height="15" x="530" ry="12" y="10" fill="black" onclick="sndReq('New Text')"/>
</svg>