Hallo,
ich hatte eine Bildermaskierung via JavaScript, die ich jetzt mit einer svg-Maskierung ersetzen möchte.Dabei sollen mit Hilfe von SVG, pattern und path Grafiken maskieren werden. Das funktioniert in einer kleinen HTML-Datei auch super. Leider klappt es nicht mehr, wenn es durch Contao eingebaut wird.
Damit die Bilder in die richtige Größe kommen nutze ich vorher folgenden Code:
PHP-Code:
$sizeleft = array (0 => 284, 1 => 150, 2 => 'croptl');
$sizeright = array (0 => 284, 1 => 150, 2 => 'croptl');
// Override the default image size
if ($this->imgleft_size != '')
{
$sizeleft = deserialize($this->imgleft_size);
}
if ($this->imgright_size != '')
{
$sizeleft = deserialize($this->imgright_size);
}
Die Funktionen kommen aus der Erweiterung extendedEditors und beschneiden die Bilder in die richtige Größe. Diesen Teil habe ich aus der vorherigen funktionierenden Version übernommen.
Der SVG-Code:
HTML-Code:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="320" height="220">
<image xlink:href="http://webseite.de/system/html/Flyer_120411-7a3083a3.jpg" x="0" y="0" width="320" height="220" />
</pattern>
</defs>
<title>Bild links</title>
<path id="svg_1" d="m1,1 284,0 l-88,150 l-196,0 z" stroke-width="2" stroke="#000000" fill="url(#img1)"/>
</svg>
Der Bilderpfad wird dabei durch die Zeile $this->getImage($this->handin_imgleft_SRC, $sizeleft[0], $sizeleft[1],$sizeleft[2]) erzeugt und funktioniert genau wie er soll.
Das ist der Code, wie ihn Contao erzeugt. Kopiere ich ihn heraus und setze ihn in eine eigene Datei funktioniert es wieder. Auch wenn ich es auf einen Server hochlade. Ich kann mir leider nicht erklären, warum die Bilder durch Contao nicht angezeigt werden.
Zur Ansicht hier mal Beispiele:
Die kleine Datei auf dem Testserver: http://diegese.de/svg/fs_svg.html
Die Contao-Seite mit dem SVG: http://filmstube.de/test.html
(die ersten beiden Bilder sind SVG-maskiert weiter unten ist es noch JavaScript - funktioniert nicht im IE)
Vielen Dank und viele Grüße
Lesezeichen