SVG Pfad zur Maskierung von Grafiken

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

Das Problem ist in diesem Fall das Base-Tag. Dadurch wird der Zugriff des path auf das Bild im Pattern verfälscht, da nicht auf die ID, sondern auf die ID mit der Base-URI davor zugegriffen wird. Abhilfe schafft folgendes:

HTML-Code:

---

<path id="svg_1" d="m1,1 284,0 l-88,150 l-196,0 z" stroke-width="2" stroke="#000000" fill="url({{env::url}}/{{env::request}}#img1)"/>

---

Auf diese Weise wird der Zugriff absolute und Base stört nicht mehr. Juhu...

Das "Problem" ist tatsächlich der <base> Tag:
http://www.chriskrycho.com/2015/html...e-and-svg.html

Da ich jetzt einige Stunden verbracht habe das Problem zu lösen und erst sehr spät auf diesen Artikel gestoßen bin und da sicherlich einige auf SVGs referenzieren möchten welche per file_get_contents direkt in das Dokument geladen werden, hier mein Lösungansatz:

PHP-Code:

---

<?php // Include SVG Icons: > IE8 ?>
<?php if (!preg_match('/(?i)msie [1-8]/',$_SERVER['HTTP_USER_AGENT'])): ?>
  <?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/files/images/svg/svg-icons.svg")?>
<?php endif; ?>

---

HTML-Code:

---

<svg><use xlink:href="{{env::url}}/{{env::request}}#icon"></use></svg>

---

Zitat:

---

Zitat von ttcdummy

Das "Problem" ist tatsächlich der <base> Tag:
http://www.chriskrycho.com/2015/html...e-and-svg.html

Da ich jetzt einige Stunden verbracht habe das Problem zu lösen und erst sehr spät auf diesen Artikel gestoßen bin und da sicherlich einige auf SVGs referenzieren möchten welche per file_get_contents direkt in das Dokument geladen werden, hier mein Lösungansatz:

PHP-Code:

---

<?php // Include SVG Icons: > IE8 ?>
<?php if (!preg_match('/(?i)msie [1-8]/',$_SERVER['HTTP_USER_AGENT'])): ?>
  <?php echo file_get_contents($_SERVER["DOCUMENT_ROOT"]."/files/images/svg/svg-icons.svg")?>
<?php endif; ?>

---

HTML-Code:

---

<svg><use xlink:href="{{env::url}}/{{env::request}}#icon"></use></svg>

---

---

Im IE9 wird bei Angabe des absoluten URL-Pfades das SVG-Icon allerdings nicht mehr angezeigt.

Abhilfe schafft hier folgender Code, der sowohl im Firefox als auch im IE9 funktioniert:

PHP-Code:

---

<svg><use xlink:href="<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox')): ?>{{env::url}}/{{env::request}}<?php endif; ?>#icon"></use></svg>

---