SVG Text linearen Gradienten schneidet Text [Safari]

Question

Ich versuche, einen linearen Gradienten zu einem <text> Tag hinzuzufügen, über <svg>, und es funktioniert in den meisten Browsern, außer auf Safari v8 +, wo ein Teil des Textes scheint abgeschnitten werden.

ich meine, seine entweder etwas falsch mit:

• Schriftfamilie: Playfair, sein die Art und Weise (versuchte gemacht auf Last warten und injiziert, um die svg nach, aber mit dem gleichen Ergebnis endete
• fehlt viewbox attr .: versucht es das Hinzufügen, scheint nicht viel zu ändern oder nicht zu diesem Problem (ich kann mich irren)
• falschen Code - richtig
in anderen Browsern zu verhalten scheint

Hier ist ein Code-Snippet und eine codepen zu gehen.

Jede Hilfe wird sehr geschätzt.

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700italic); 
 

 
.not-found{ 
 
    font-size: 270px; 
 
    font-family: 'Playfair Display'; 
 
}

<svg width="100%" height="190px" class="not-found"> 
 
    <defs> 
 
    <linearGradient id="text" x1="0" y1="0" x2="0" y2="100%"> 
 
     <stop stop-color="green" offset="0"/> 
 
     <stop stop-color="red" offset="100%"/> 
 
    </linearGradient> 
 
    </defs> 
 
    <text text-anchor="middle" x="50%" y="50%" dy="50px" fill="url(#text)"> 
 
    404 
 
    </text> 
 
</svg>

Answer 1

Nach ein paar Änderungen hier und da, kann ich schließen, nur, dass es ein Problem mit den font-family und den linearGradient nicht gut funktioniert unter Safari ist.

Also was ich tat war, eine <tspan>&nbsp;</tspan> innerhalb der <text> Tag, so auf diese Weise würde es den 404 Text schieben und enthüllen "abgeschnitten" Bereich. Dann fügte ich einen transform: translate(-30) (muss möglicherweise einige Feinabstimmung abhängig von dem Szenario) zu dem <text> hauptsächlich weil der   den Text zu sehr verdrängte.

Es ist nicht die eleganteste Lösung, aber es funktioniert, ich bin mir nicht sicher, was das Problem mit dieser Schriftfamilie und dem Farbverlauf ist, aber zumindest jetzt funktioniert es richtig ('ish').

Hier ist das endgültige Markup und codepen, falls jemand in dieses Problem läuft.

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700italic); 
 

 

 
.not-found text{ 
 
    font-size: 200px; 
 
    font-family: 'Playfair Display', serif; 
 
    font-weight: 700; 
 
    font-style: italic; 
 
}

<!--old stuff--> 
 
<svg width="100%" height="190px" class="not-found"> 
 
    <defs> 
 
    <linearGradient id="text" x1="0" y1="0" x2="0" y2="100%"> 
 
     <stop stop-color="green" offset="0"/> 
 
     <stop stop-color="red" offset="100%"/> 
 
    </linearGradient> 
 
    </defs> 
 
    <text text-anchor="middle" x="50%" y="50%" dy="50px" fill="url(#text)"> 
 
    404 
 
    </text> 
 
</svg> 
 

 
<!--new stuff--> 
 
<svg width="100%" height="190px" class="not-found"> 
 
    <defs> 
 
    <linearGradient id="text" x1="0" y1="0" x2="0" y2="100%"> 
 
     <stop stop-color="green" offset="0"/> 
 
     <stop stop-color="red" offset="100%"/> 
 
    </linearGradient> 
 
    </defs> 
 
    <text transform='translate(-30)' text-anchor="middle" x="50%" y="50%" dy="50px" fill="url(#text)"> 
 
    <tspan>&nbsp;<tspan> 404 
 
    </text> 
 
</svg>