2015-09-10 14 views
8

Ich habe eine SVG-Leinwand, die Benutzer einige <image> Elemente auswählen und in der Größe ändern können. Und ich verwende den Attributwert preserveAspectRatio="xMidYMid meet", um das ursprüngliche Seitenverhältnis beizubehalten. Die ursprünglichen Bildquellen sind meistens 256x256px Größe. Wenn ich auf Firefox und IE-11 die Größe von <image> Elementen auf eine kleinere Größe als ihre Originalgröße anpasse, 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.SVG <image> Element Rendering-Qualität

Vielen Dank.

EDIT: Hinzufügen Probe ..

https://jsfiddle.net/p8km6nhc/7/

<svg viewBox="-170 -87 1678 869" style="width: 100%; height: 100%; overflow: hidden; left: 0px; top: -0.800003px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <defs> 
     <filter id="varlikItemShadow1"> 
      <feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur> 
      <feOffset dy="1" dx="1"></feOffset> 
      <feMerge> 
       <feMergeNode></feMergeNode> 
       <feMergeNode in="SourceGraphic"></feMergeNode> 
      </feMerge> 
     </filter> 
    </defs> 
    <g> 
     <g transform="matrix(1,0,0,1,0,0)"> 
      <g transform="matrix(1,0,0,1,158,256)"> 
       <g title="" data-original-title="" data-rounded="yes"> 
        <text style="font:0px arial;" x="0" y="1" stroke="none" transform="matrix(1,0,0,1,0,0)" fill="#ffffff" fill-opacity="0.111111">[[VarlikId=3999]]</text> 
        <rect filter="url(#varlikItemShadow1" stroke="#2b5987" stroke-width="2" fill-opacity="0.9" fill="#ffe8f6" ry="10" rx="10" y="0" x="0" height="140" width="1270"></rect> 
        <path d="M0 0 L 1268 0 1268 138 0 138Z" stroke="none" stroke-width="0" fill="none" fill-opacity="0" transform="matrix(1,0,0,1,0,0)"></path> 
        <image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet" x="14" y="14" width="1242px" height="66px" xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image> 
        <text style="font:32px arial;" x="0" y="30" stroke="none" transform="matrix(1,0,0,1,591,94)" fill="#2b5987">3. Kat</text> 
       </g> 
      </g> 
     </g> 
    </g> 
</svg> 

ERGEBNIS:

Sample screenshot

+0

Können Sie bitte einen Beispielcode zur Verfügung stellen? – learningloop

+0

Ihr Beispiel bezieht sich auf ein Bild mit einem relativen Link - könnten Sie das Bild irgendwo platzieren, wo es zugänglich ist? Oder vielleicht inline mit etwas wie http://duri.me/ – CupawnTae

+0

@learningloop Ich habe das Beispiel bearbeitet. – Noldor

Antwort

1

Wie es wie ein Problem mit Firefox und IE-Rendering deutlich sieht, dachte an einen Versuch Workaround, um darüber zu kommen.

Anstatt <image> Element von SVG zu verwenden, versucht, Tag von HTML zu verwenden und es mit <foreignObject> Element von SVG eingebettet.

Statt:

<image image-rendering="optimizeQuality" preserveAspectRatio="xMidYMid meet" 
x="14" y="14" width="1242px" height="66px" 
xlink:href="https://deviantshare.azurewebsites.net/img/test.png"></image> 

Gebraucht:

<foreignObject x="600" y="14" width="100" height="100"> 
    <body> 
     <img src="https://deviantshare.azurewebsites.net/img/test.png" 
     type="image/svg+xml" width="66px" height="66px"> 
    </body> 
    </foreignObject> 

Aber ein ungelöstes Problem ist IE doesn't support foreignObject noch!

Codepen.io Arbeits example

+0

Ich kann nicht verwenden '' ... Genau wie du erwähnt hast, unterstützt IE es leider nicht. Wenn es in IE unterstützt würde, wäre ich in der Lage, fremdes Objekt für den gesamten Inhalt der Box Formen zu verwenden, da Textausrichtung Dinge auch eine sehr große Folter in Svg sind. – Noldor

+0

@Noldor, wenn alle Ihre pngraphics wie die in sind das beispiel, warum machst du sie nicht schon svg? Sie haben kein Support- oder Rendering-Problem und können sogar in leichteren Dateigrößen enden. – Kaiido