SVG linearGradient und Text

[undefined]

Nachtrag ...
Ich schrieb - wie schon von dir erwähnt - vom "viewBox".
Hier liegt der Knackpunkt.

[BlueJay]

Die "Verzerrbarkeit" muss erhalten bleiben, ich darf mich also im Header nicht festlegen. Jeder Versuch, dort andere Dimensionen einzuführen, führen zum Verlust des "freien Stretchings".

viewBox hin oder her, solange ich alles Mögliche zeichne, Kreise, Pfade und hassenichgesehen, funktioniert der Gradient in allen Browsern wie erwartet.

Zeichne ich aber einen Text und habe dann noch die Frechheit, ein paar Font-Parameter wie size und family anzugeben, spinnt der Gradient-Fill, ist mal zu groß, mal zu klein. Das Ganze ist unabhängig davon, ob ich Prozente oder Bruchteile (0-1.0) angebe, die Attribute direkt füttere oder dem Ganzen style verpasse.

Zum Vergleich:
der Spielkartenhintergrund sieht bei allen Browsern gleich aus, macht also von der Mischung der viewBox-Werte her nicht den geringsten Ärger.

http://www.gamecraft.de/svg_karten/c_50.svg

Gruß,
Ulrike


Zusatz:
nun habe ich die Lösung:
Als text-Attribut muss zuzätzlich

text-rendering="geometricPrecision"

gesetzt werden, dann klappt's zumindest mit dem Chrome. Konqueror ist weiterhin ein hoffnungsloser Fall.

[undefined]

Habe mal herum gestöbert.
Webkit Unterstütz nicht komplett den Gradiant.
http://www.webkit.org/projects/svg/status.xml
Was aber bei mir auf Chrome geht ist repeat.

<?xml version="1.0" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 108" 
     width="100%" height="100%" preserveAspectRatio="xMaxyMid meet"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <defs>
      <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="verlauf" spreadMethod="repeat">
        <stop offset="10%" stop-color="#FFCC00" />
        <stop offset="30%" stop-color="#CCFF00" />
        <stop offset="70%" stop-color="#FF6666" />
        <stop offset="90%" stop-color="#FFCC00" />
      </linearGradient>
    </defs>
    <text stroke="#333333" fill="url(#verlauf)" stroke-width="2" 
          x="20" y="80" font-family="serif" 
          font-size="100" id="text">Die Patience ging auf!</text>
  </g>
</svg>

Ich finde das ist ein BUG "pad" sollte auf jeden Fall Funktionieren!

[BlueJay]

repeat ist bei allen Browsern kein Problem, und die Zierschrift sieht manierlich aus.

Wie gesagt, Chrome habe ich zum Parieren bekommen, den Konqueror lasse ich dann einfach mal auf repeat.

Gruß,
Ulrike


Hm, heute morgen gefunden: ist als Bug gelistet.

Aber merke: Chome Version 20.0.1094.0 (svn131123) stellt bei Setzen dieses text-Attributes den linearen Gradient im Text korrekt dar.

text-rendering="geometricPrecision"