एसवीजी <image> तत्व प्रतिपादन गुणवत्ता

मेरे पास एक एसवीजी कैनवास है जो उपयोगकर्ता कुछ <image> तत्वों का चयन और आकार बदल सकता है। और मैं मूल पहलू अनुपात को रखने के लिए preserveAspectRatio="xMidYMid meet" विशेषता मान का उपयोग करता हूं। मूल छवि स्रोत अधिकतर 256x256px आकार होते हैं। फ़ायरफ़ॉक्स और आईई -11 पर, जब मैं <image> तत्वों को अपने मूल आकार की तुलना में छोटे आकार में आकार देता हूं, तो वे बहुत पिक्सलेटेड दिखते हैं। क्रोम पर वे बहुत चिकनी दिखते हैं। मुझे आश्चर्य है कि क्या कोई सीएसएस या एसवीजी विशेषताएं हैं जो मुझे फ़ायरफ़ॉक्स और आईई पर भी चिकनी दिखने में मदद कर सकती हैं।एसवीजी <image> तत्व प्रतिपादन गुणवत्ता

धन्यवाद।

संपादित करें: नमूना जोड़ा जा रहा है ..

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> तत्व का उपयोग करने का

, HTML की <img> टैग का उपयोग करने की कोशिश की और एसवीजी के <foreignObject> तत्व का उपयोग यह एम्बेडेड।

बजाय:

<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

मैं कर सकता हूं ' 'का उपयोग न करें ... जैसा कि आपने बताया है, आईई दुर्भाग्य से इसका समर्थन नहीं करता है। यदि यह आईई में समर्थित था, तो मैं बॉक्स आकार की पूरी सामग्री के लिए विदेशी तत्व का उपयोग करने में सक्षम होगा, क्योंकि टेक्स्ट संरेखण चीजें भी svg में एक बहुत बड़ा यातना है .. – Noldor

@Noldor, यदि आपके सभी पेंग्राफिक्स एक जैसा हैं उदाहरण, आप उन्हें पहले से ही svg क्यों नहीं बनाते? आपके पास कोई समर्थन या प्रतिपादन समस्या नहीं होगी, और यह हल्का फ़ाइल आकारों में भी समाप्त हो सकती है। – Kaiido

एसवीजी <image> तत्व प्रतिपादन गुणवत्ता

उत्तर

संबंधित मुद्दे