Anzeige:
Ergebnis 1 bis 8 von 8

Thema: SVG linearGradient und Text

  1. #1
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825

    SVG linearGradient und Text

    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
    Eigentlich ganz einfach, wenn man's weiss!

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Vermute es liegt an preserveAspectRatio
    http://commons.oreilly.com/wiki/inde...g_Aspect_Ratio
    Versuche mal:
    Code:
    preserveAspectRatio="xmaxymax slice"
    Gültige CASE Werte sind.
    Code:
    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
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    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.
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  4. #4
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    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
    Code:
    gradientUnits="userSpaceOnUse"
    und
    Code:
    gradientUnits="objectBoundingBox"
    hatten keinen sichtbaren Effekt.

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

    Gruß,
    Ulrike
    Eigentlich ganz einfach, wenn man's weiss!

  5. #5
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Nachtrag ...
    Ich schrieb - wie schon von dir erwähnt - vom "viewBox".
    Hier liegt der Knackpunkt.
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  6. #6
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    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
    Code:
    text-rendering="geometricPrecision"
    gesetzt werden, dann klappt's zumindest mit dem Chrome. Konqueror ist weiterhin ein hoffnungsloser Fall.
    Geändert von BlueJay (27-04-2012 um 15:53 Uhr)
    Eigentlich ganz einfach, wenn man's weiss!

  7. #7
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    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.
    Code:
    <?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!
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  8. #8
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    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.
    Code:
    text-rendering="geometricPrecision"
    Geändert von BlueJay (28-04-2012 um 12:29 Uhr) Grund: noch was dazu gefunden
    Eigentlich ganz einfach, wenn man's weiss!

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •