SVG <image> element renderujący jakość

Mam płótno SVG, w którym użytkownik może wybierać i zmieniać rozmiar niektórych elementów w środku <image>. Używam wartości atrybutu preserveAspectRatio="xMidYMid meet", aby zachować oryginalny współczynnik proporcji. Oryginalne źródła obrazu mają głównie rozmiar 256x256px. W przeglądarkach Firefox i IE-11, gdy zmieniam rozmiar elementów <image> na mniejszy niż ich oryginalny rozmiar, wyglądają one bardzo pikselowo. W Chrome wyglądają całkiem gładko. Zastanawiam się, czy istnieją jakieś funkcje css lub svg, które mogą mi pomóc w wygładzeniu wyglądu Firefoksa i IE.SVG <image> element renderujący jakość

Dziękuję.

EDIT: Dodawanie próbki ..

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>

WYNIK:

Źródło

2015-09-10 Noldor

Czy możesz podać przykładowy kod? – learningloop

Twoja próbka odnosi się do obrazu ze względnym łączem - czy możesz umieścić obraz w jakimś miejscu, do którego można uzyskać dostęp? A może wstaw to w coś takiego jak http://duri.me/ – CupawnTae

@learningloop Edytowałem próbkę. – Noldor

Jak to wyraźnie wygląda na problem z IE i Firefox renderowania, myślałem o spróbowaniu obejście tego.

Zamiast używać elementu <image> SVG, próbowano używać tagu HTML tagu <img> i osadzać go przy użyciu elementu SVG z elementu <foreignObject>.

Zamiast:

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

używany:

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

ale jeden problem jest w toku IE doesn't support foreignObject jeszcze!

Codepen.io pracuje example

Źródło

2015-09-10 15:36:44 learningloop

nie używaj '' ... Tak jak wspomniałeś, IE nie obsługuje tego niestety. Gdyby był obsługiwany w IE, byłbym w stanie wykorzystać obcy obiekt dla całej zawartości kształtów pudełek, ponieważ elementy wyrównania tekstu są również bardzo dużą torturą w svg .. – Noldor

@Noldor, jeśli wszystkie twoje wykresy są takie jak w na przykład, dlaczego już ich nie zrobisz? Nie będziesz mieć żadnego problemu z obsługą lub renderowaniem, a może nawet kończyć się lżejszymi rozmiarami plików. – Kaiido

SVG <image> element renderujący jakość

Odpowiedz

Powiązane problemy