SVG linearGradient und Text

[BlueJay]

Hallo Leute,

schaut Euch mal diese Bild mit Firefox und Chrome oder Konqueror an. Verändert auch mal das Verhältnis Höhe/Breite.

Es soll aussehen wie im Mozilla, aber die anderen beiden haben so ihre eigenen Vorstellungen vom linearGradient.

Der Effekt ist übrigens unabhängig davon, ob es ein horizontaler oder vertikaler Gradient ist.

Fragen:

1. Was ist Standard?
2. Wie kann ich den beiden beibringen, wie Firefox zu reagieren?

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

Gruß,
Ulrike

[undefined]

Vermute es liegt an preserveAspectRatio
http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Coordinates#Preserving_Aspect_Ratio
Versuche mal:


preserveAspectRatio="xmaxymax slice"

Gültige CASE Werte sind.


SVG_MEETORSLICE_MEET 1
SVG_MEETORSLICE_SLICE 2
SVG_MEETORSLICE_UNKNOWN 0
SVG_PRESERVEASPECTRATIO_NONE 1
SVG_PRESERVEASPECTRATIO_UNKNOWN 0
SVG_PRESERVEASPECTRATIO_XMAXYMAX 10
SVG_PRESERVEASPECTRATIO_XMAXYMID 7
SVG_PRESERVEASPECTRATIO_XMAXYMIN 4
SVG_PRESERVEASPECTRATIO_XMIDYMAX 9
SVG_PRESERVEASPECTRATIO_XMIDYMID 6
SVG_PRESERVEASPECTRATIO_XMIDYMIN 3
SVG_PRESERVEASPECTRATIO_XMINYMAX 8
SVG_PRESERVEASPECTRATIO_XMINYMID 5
SVG_PRESERVEASPECTRATIO_XMINYMIN 2

[undefined]

Habe gerade dein Script bei mir lokal getestet.
Der unterschied von Firefox zu den anderen ist...
Das Firefox mix Werte annimmt, die anderen nicht.
Die könne also nicht mit % und festen Werten behandeln.

[BlueJay]

Hm, das "none" hatte schon seinen Sinn, das das Bild vom HTML-Dokument angepasst wird. Und da kann sich das Seitenverhältnis ändern.

Auch, wenn man dem Viewport andere Dimensionen (px) mitgibt, erledigt sich das Stretching via HTML.


Inzwischen habe ich vesucht, die Prozentwerteim Gradienten durch Absolutwerte zu ersetzen, das ergab gar keinen Gradienten.

Die Attributeadienten
gradientUnits="userSpaceOnUse" und
gradientUnits="objectBoundingBox" hatten keinen sichtbaren Effekt.

Knackpunkt ist wohl, dass das Bounding Rect vom Text in den beiden Browsern falsch berechnet wird.

Gruß,
Ulrike

[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"