Wiedergabequalität von SVG-Bildelementen

8

Ich habe eine SVG-Leinwand, auf der Benutzer <image> -Elemente auswählen und deren Größe ändern können. Und ich verwende preserveAspectRatio="xMidYMid meet" Attributwert, um das ursprüngliche Seitenverhältnis beizubehalten. Die ursprünglichen Bildquellen sind meist 256x256px size. Wenn ich in Firefox und IE-11 <image> -Elemente auf eine kleinere Größe als ihre ursprüngliche Größe skaliere, sehen sie sehr pixelig aus. Auf Chrome sehen sie ziemlich glatt aus. Ich frage mich, ob es irgendwelche CSS- oder SVG-Funktionen gibt, die mir helfen könnten, sie auch in Firefox und IE glatter aussehen zu lassen.

Danke.

BEARBEITEN: Probe hinzufügen ..

Ссылка

%Vor%

ERGEBNIS:

    
Noldor 10.09.2015, 11:23
quelle

1 Antwort

1

Da es offensichtlich ein Problem mit Firefox und IE-Rendering ist, dachte man daran, einen Workaround zu versuchen, um darüber zu kommen.

Anstatt <image> element von SVG zu verwenden, haben Sie versucht, <img> tag von HTML zu verwenden und es mit <foreignObject> element von SVG eingebettet.

Anstelle von:

%Vor%

Verwendet:

%Vor%

Aber ein ausstehendes Problem ist IE unterstützt noch kein ForeignObject !

Codepen.io funktioniert Beispiel

    
learningloop 10.09.2015 15:36
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset LINQ to SQL: Gibt es eine vollständige Liste der unterstützten IQueryable-Erweiterungsmethoden?