Fallback für SVG füllen Bildquelle

Ich bin dabei, ein Bild als SVG-Füllung zu verwenden. Ich verwende derzeit die folgenden SVG-Markup:Fallback für SVG füllen Bildquelle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 200 25" enable-background="new 0 0 0 0" xml:space="preserve"> 
<defs> 
    <pattern id="bg" patternUnits="userSpaceOnUse" width="300" height="25"> 
     <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..." preserveAspectRatio="xMidYMid slice"></image> 
    </pattern> 
</defs> 
<g class="graphic"> 
    <path d="..."></path> 
</g>

(Ich habe einige Details ausgelassen ("..."), von denen ich sicher bin, sind nicht relevant für mein Problem.)

In CSS verwende ich den folgenden Code, um die Muster-ID anzufügen. Pls siehe unten:

.default-header .site-name svg.logo .graphic { 
    fill:url(#bg); 
}

Ich habe schon einige graben getan und fand heraus, dass diese Technik (Bilder als SVG Hintergrund) in FireFox und iOS Safari nicht unterstützt. Deshalb habe ich die folgende "Fall-Back" -Verfahren in CSS:

.default-header .site-name svg.logo .graphic { 
    fill:#ddd; 
} 

@supports (-webkit-appearance:none) { 

    .default-header .site-name svg.logo .graphic { 
     fill:url(#bg); 
    } 
}

Der obige Code funktioniert, AUSSER für iOS 09.08 Safari. Mein Problem ist hauptsächlich, dass ich nicht weiß, wie ich diese nicht unterstützenden Browser ansprechen soll. Ich bin mir sicher, dass es mehr gibt, als ich gerade teste. SO ... Ich habe mich entschieden, mit Modernizr nach Unterstützung zu suchen, aber ich kann nicht sehen, dass sie eine geeignete, gegenständliche Art der Überprüfung findet, ob diese SVG-Technik unterstützt wird. Mit anderen Worten, auf dieser Seite: https://modernizr.com/download?setclasses kann ich die für mein Problem geeignete Browserfunktion nicht finden.

Ich hoffe, jemand weiß, in welche Richtung ich am besten schauen könnte oder noch besser, hat einige Erfahrung mit dieser Technik, die ich immer noch für so toll halte (wenn es funktioniert).

Vielen Dank im Voraus Jungs!

Quelle

2016-04-08 digifrog

Bilder als SVG-Hintergrund werden in Firefox seit Version 4, d. H. Seit 2011, unterstützt. Woher haben Sie Ihre Forschung? –

@RobertLongson Es ist nicht speziell ein Hintergrund, wie in einer Eigenschaft. Es ist ein ** füllen **. Das scheint in FireFox nicht zu funktionieren, soweit ich das beurteilen kann. Also keine Forschung, nur persönliche Erfahrung. – digifrog

Es funktioniert sicherlich in einer Füllung, vorausgesetzt, Sie erhalten die Syntax richtig. Ich bin mir nicht sicher, wo Sie mit den von Ihnen bereitgestellten Snippets falsch liegen. A [mcve] würde helfen. –

Ich habe eine Lösung gefunden, indem ich einen anderen Ansatz im Markup verwendete. Statt defs und gs verwenden, habe ich das folgende Markup den gleichen Effekt zu erzielen:

<svg id="graphic" width="300" height="40"> 
    <!-- Graphic: Styling (inline as FF fix) --> 
    <style> svg image { clip-path:url(#clipping); } </style> 
    <!-- Clip Path --> 
    <clipPath id="clipping"> 
     <!-- this might as well be any type of path --> 
     <text id="graphicText" x="0" y="37">My Text</text> 
    </clipPath> 
    <!-- Image --> 
    <image id="graphicImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{img_url}" width="300" height="300" x="0" y="-120px"></image> 
</svg>

verwenden ich CSS-Styling für den Text selbst.

Hoffe das hilft jemandem!

Quelle

2016-04-10 15:32:38 digifrog

Antwort

Verwandte Themen