SVG <image> qualità rendering elemento

Ho una tela SVG che l'utente può selezionare e ridimensionare alcuni elementi <image> all'interno. E io uso il valore dell'attributo preserveAspectRatio="xMidYMid meet" per mantenere le proporzioni originali. Le sorgenti di immagini originali sono per lo più la dimensione 256x256px. Su Firefox e IE-11, quando ridimensiono gli elementi <image> con dimensioni inferiori rispetto alle loro dimensioni originali, sembrano molto pixelati. Su Chrome sembrano piuttosto lisci. Mi chiedo se ci sono delle funzionalità CSS o SVG che potrebbero aiutarmi a farle apparire più fluide anche su Firefox e IE.SVG <image> qualità rendering elemento

Grazie.

EDIT: Aggiunta di campione ..

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>

RISULTATO:

fonte

2015-09-10 Noldor

Si può fornire un codice di esempio? – learningloop

il tuo campione si riferisce a un'immagine con un link relativo - potresti mettere l'immagine da qualche parte a cui è possibile accedere? O forse lo si inline con qualcosa come http://duri.me/ – CupawnTae

@learningloop Ho modificato l'esempio. – Noldor

Come sembra chiaramente come un problema con Firefox e IE rendering, pensato di provare a soluzione per venire oltre questo.

Invece di utilizzare l'elemento <image> di SVG, ho provato a utilizzare il tag <img> di codice HTML e lo abbiamo incorporato utilizzando l'elemento <foreignObject> di SVG.

Invece di:

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

Usato:

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

Ma un problema in sospeso è IE doesn't support foreignObject ancora!

Codepen.io lavoro example

fonte

2015-09-10 15:36:44 learningloop

I can non usare '' ... Proprio come hai detto, IE non lo supporta purtroppo. Se fosse supportato in IE, sarei in grado di usare foreignobject per tutto il contenuto delle forme della scatola, dal momento che le cose dell'allineamento del testo sono anche una grande tortura in svg .. – Noldor

@Noldor, se tutti i tuoi pngraphics sono come quello in l'esempio, perché non li fai già svg? Non avrai alcun problema di supporto o di rendering e potrebbe persino finire con dimensioni di file più leggere. – Kaiido

SVG <image> qualità rendering elemento

risposta

Problemi correlati