SVG/Filter/feImage

Aus SELFHTML-Wiki
< SVG‎ | Filter(Weitergeleitet von FeImage)
Wechseln zu: Navigation, Suche

Der primitive Filter feImage referenziert eine externe Grafik oder ein SVG-Fragment .[1]

  • SVG 1.1
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
<defs>
  <svg id="doppeldecker">
    ...  	  	  
  </svg>	

  <filter id="image" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
     <feImage x="0" y="0" width="200" height="200" xlink:href="http://wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
  </filter>

  <filter id="Vektorgrafik" x="0" y="0"  filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" xlink:href="http://wiki.selfhtml.org/images/2/21/Burg.svg" result="img" />
  </filter>
  
  <filter id="Fragment" x="0" y="0"  filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="100%" height="100%" xlink:href="#doppeldecker" result="img" />
  </filter>


</defs>

  <text x="20" y="20">Rastergrafik</text>
  <rect width="200" height="200" 
        transform="translate(10,50)" 
		filter="url(#image)" 
  />
  
  <text x="270" y="20">Vektorgrafik</text>
  <rect width="200" height="200" 
        transform="translate(260,50)" 
		filter="url(#Vektorgrafik)" 
  />
  
  <text x="520" y="20">SVG-Fragment</text>
  <rect width="200" height="200" 
        transform="translate(510,50)" 
		filter="url(#Fragment)" 
  />
In den Beispielen werden drei Grafiken mit feImage referenziert. die linke Grafik ist eine Rastergrafik, die mittlere eine SVG-Vektorgrafik und die rechte das im Definitionsabschnitt befindliche SVG-Fragment #doppeldecker.

FeImage verhält sich wie image und hat die gleichen Attribute:

  • x: horizontale Position der linken oberen Ecke
  • y: vertikale Position der linken oberen Ecke
  • height - Höhe
  • width - Breite
  • xlink:href - URI der Grafik
  • preserveAspectRatio: defer, align, meetOrSlice; Standardwert:xMidYMid meet (legt Seitenverhältnis fest)
Beachten Sie: Wenn Sie ein SVG-Fragment referenzieren wollen, müssen Sie die Höhe und Breite des feImage-Elements auf 100% setzen, da der Filter die originalen Breiten- und Höhenangaben zugunsten filterinterner Einstellungen ignoriert.[2]
Beachten Sie: Der Firefox hat hier einen alten Bug und unterstützt keine Referenzierungen von internen SVG-Fragmenten.[3]
Alternativ könnten Sie die Grafik als UTF-8 Data-URI einbetten:
<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /



Quellen[Bearbeiten]

  1. W3C: feImageElement
  2. http://apike.ca/prog_svg_filter_feImage.html
  3. https://bugzilla.mozilla.org/show_bug.cgi?id=455986

Referenz[Bearbeiten]