General developer forum

Print_header in weblib.php includes meta tags from (standard) theme meta.php - have you tried it? Does it not work in theme header.html?

Hi,

I think you may have misunderstood.

The content-type setting you give is only required for a separate SVG file i.e. if you are making a whatever.svg which serves the SVG only and is not an html document.

If you want to do inline SVG then you do not need to set that content-type. It would not be possible because a document can only have one content type whereas yours would need two (XHTML and SVG). In XML the mechanism for specifying these types is namespaces.

For it to work in Firefox etc the part of the document with the SVG in MUST be xml (not html) so that the namespace works. There are two options for achieving this:

1) easy, no javascript, but has many consequences and will cause critical failures unless you're careful

Set the content-type (in header as given) application/xhtml+xml. (I think there is a Moodle option which will make it do this. Use a tool such as the LiveHTTPHeaders Firefox extension to verify that the page is being sent like that and not as text/html.)

Once you have done that you must use the correct namespace for your HTML document and for the SVG itself.

Note that setting XHTML has other consequences; some of Moodle's JavaScript might not work, for instance, and if there are any minor errors on the page they will cause it not to display. Also it won't display at all (it will offer to save) on Internet Explorer.

2) harder, javascript, but won't cause any problems

If you don't want to use an XML or XHTML mime type for the document, you CAN still add inline svg but you need to use JavaScript. The document.createElementNS function can create elements in the SVG namespace. Here is some example code (this is not complete but you should be able to see what I'm doing):

var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';

 function textrotate_make_svg(el)

{

 var string=el.firstChild.nodeValue;

 // Create SVG

 var svg=document.createElementNS(SVGNS,'svg');

 svg.setAttribute('version','1.1');

 var width=(el.offsetHeight*9)/8;

 svg.setAttribute('width',width);

 svg.setAttribute('height',el.offsetWidth+20);

 var text=document.createElementNS(SVGNS,'text');

 svg.appendChild(text);

 text.setAttribute('x',el.offsetWidth);

 text.setAttribute('y',-el.offsetHeight/4);

 text.setAttribute('text-anchor','end');

 text.setAttribute('transform','rotate(90)');

 text.appendChild(document.createTextNode(string));

 // Replace original content with this new SVG

 el.parentNode.insertBefore(svg,el);

 el.parentNode.removeChild(el);

}

There might be a way to do this using innerHTML (innerXML, anyone?) but I despise such laziness.

--sam