Automatischer Screenshot, SVG und Pattern

[m.]

Mahlzeit, ich erzeuge ein SVG-Bild, das dann im Browser per CSS unterschiedliche Farben bekommt. Per JS-Hack ist das Bild als Raw-SVG im Quelltext einer HTML-Seite erzeugt durch PHP.

	"use strict";
	$(document).ready(function(){
		/**
		 * SVG in RAW-Daten umschreiben
		 */
		$('img.svg').each(function(){
			var $img = $(this),
			imgID = $img.attr('id'),
			imgClass = $img.attr('class'),
			imgURL = $img.attr('src');

			$.get(imgURL, function(data) {
				// Get the SVG tag, ignore the rest
				var $svg = $(data).find('svg');

				// Add replaced image’s ID to the new SVG
				if(typeof imgID !== 'undefined') {
					$svg = $svg.attr('id', imgID);
				}

				// Add replaced image’s classes to the new SVG
				if(typeof imgClass !== 'undefined') {
					$svg = $svg.attr('class', imgClass + ' replaced-svg');
				}

				// Remove any invalid XML tags as per http://validator.w3.org
				$svg = $svg.removeAttr('xmlns:a');

				// Replace image with new SVG
				$img.replaceWith($svg);
			}, 'xml');
		});

Dann mach ich Screenshots per phantomjs, was bei Farben problemlos klappt.

Was nicht funktioniert, wenn ich im SVG Pattern definiere und dann per

			fill: url(#pattern);
			stroke: url(#pattern);

das Pattern als Füllfarbe zuweisen will. Im Chromium und Chrome wird es richtig angezeigt (FF und Opera geht auch glaub ich), was nicht geht, ist per phantomjs, da ist die Füllung schwarz. Alles unter LMDE 2, alle Pakete aktuell.

Da phantomjs per Webkit rendert, sollte es doch eigentlich klappen. Die aufgerufene URL ist immer idetisch, egal ob phantomjs oder Browser.

Ok, nach diesen Ausführungen jetzt meine Frage:

Wer kann mir sagen, wie ich das Problem löse? Gerne auch ein anderes Programm für Screenshots, wichtig ist nur, dass ich alles per Shell-Script aufrufen kann. Momentan muss ich die Screenshots mit Patterns per Hand machen und das kostet Zeit und macht keinen Spass.

thx4hlp