SVG <image> элемент рендеринга качества

У меня есть холст SVG, который пользователь может выбирать и изменять размер элементов <image>. И я использую значение атрибута preserveAspectRatio="xMidYMid meet", чтобы сохранить исходное соотношение сторон. Исходными источниками изображения являются в основном размер 256x256px. В Firefox и IE-11, когда я изменяю размер <image> элементов меньшего размера, чем их первоначальный размер, они выглядят очень неровными. В Chrome они выглядят довольно гладко. Интересно, есть ли какие-либо функции css или svg, которые могут помочь мне сделать их более гладкими на Firefox и IE.SVG <image> элемент рендеринга качества

спасибо.

EDIT: Добавление образца ..

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>

РЕЗУЛЬТАТ:

источник

2015-09-10 Noldor

Можете ли вы предоставить образец кода? – learningloop

ваш образец относится к изображению с относительной ссылкой - можете ли вы поместить изображение где-нибудь, к которому он может быть обращен? Или, может быть, встроить его с чем-то вроде http://duri.me/ – CupawnTae

@learningloop. Я отредактировал образец. – Noldor

Как ясно выглядит вопрос с Firefox и IE рендеринга, думал о попытке обходное решение для этого.

Вместо использования <image> элемент SVG, пробовал использовать <img> тег HTML и встроил его, используя <foreignObject> элемент SVG.

Вместо:

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

Использована

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

Но один нерешенный вопрос является IE doesn't support foreignObject еще!

Codepen.io работает example

источник

2015-09-10 15:36:44 learningloop

Я могу не используйте '' ... Как вы уже упоминали, IE не поддерживает его, к сожалению. Если бы он был поддержан в IE, я мог бы использовать foreignobject для всего содержимого форм коробки, так как выравнивание текста также является очень большой пыткой в svg .. – Noldor

@Noldor, если все ваши pngraphics похожи на пример, почему бы вам не сделать их svg уже? У вас не будет проблем с поддержкой или рендерингом, и это может даже закончиться меньшими размерами файлов. – Kaiido

SVG <image> элемент рендеринга качества

ответ

Смежные вопросы