mrunix.de

Zurück   mrunix.de > Programmieren > HTML und Markupsprachen Forum
Benutzername
Kennwort
Registrieren Hilfe Benutzerliste Kalender Suchen Heutige Beiträge Alle Foren als gelesen markieren

HTML und Markupsprachen Forum XML, Ajax, Javascript, CSS, XSL, XSLT, SVG

Antwort
 
Themen-Optionen Thema bewerten Ansicht
Alt 27-04-2012, 10:23   #1
BlueJay
Registrierter Benutzer
 
Benutzerbild von BlueJay
 
Registriert seit: 27.08.2004
Beiträge: 822
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!
BlueJay ist offline   Mit Zitat antworten
Alt 27-04-2012, 10:42   #2
undefined
Registrierter Benutzer
 
Benutzerbild 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
undefined ist offline   Mit Zitat antworten
Alt 27-04-2012, 11:38   #3
undefined
Registrierter Benutzer
 
Benutzerbild 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
undefined ist offline   Mit Zitat antworten
Alt 27-04-2012, 11:40   #4
BlueJay
Registrierter Benutzer
 
Benutzerbild von BlueJay
 
Registriert seit: 27.08.2004
Beiträge: 822
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!
BlueJay ist offline   Mit Zitat antworten
Alt 27-04-2012, 11:44   #5
undefined
Registrierter Benutzer
 
Benutzerbild 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
undefined ist offline   Mit Zitat antworten
Alt 27-04-2012, 14:36   #6
BlueJay
Registrierter Benutzer
 
Benutzerbild von BlueJay
 
Registriert seit: 27.08.2004
Beiträge: 822
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.
__________________
Eigentlich ganz einfach, wenn man's weiss!

Geändert von BlueJay (27-04-2012 um 14:53 Uhr)
BlueJay ist offline   Mit Zitat antworten
Alt 27-04-2012, 15:08   #7
undefined
Registrierter Benutzer
 
Benutzerbild 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
undefined ist offline   Mit Zitat antworten
Alt 27-04-2012, 18:10   #8
BlueJay
Registrierter Benutzer
 
Benutzerbild von BlueJay
 
Registriert seit: 27.08.2004
Beiträge: 822
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"
__________________
Eigentlich ganz einfach, wenn man's weiss!

Geändert von BlueJay (28-04-2012 um 11:29 Uhr) Grund: noch was dazu gefunden
BlueJay ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist aus.
HTML-Code ist aus.

Gehe zu


Alle Zeitangaben in WEZ +1. Es ist jetzt 13:10 Uhr.


Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2014, vBulletin Solutions, Inc.