Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

SVG/Filter/feImage

Aus SELFHTML-Wiki
< SVG‎ | Filter
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]