google-chrome - full - google chrome update




क्रोम<img> टैग के माध्यम से संदर्भित एसवीजी प्रस्तुत नहीं करता है (8)

Svg-tag को नेमस्पेस विशेषता xmlns की आवश्यकता है:

<svg xmlns="http://www.w3.org/2000/svg"></svg>

मुझे Google क्रोम के साथ समस्याएं हैं जो एक आईएमजी टैग के साथ svg को प्रस्तुत नहीं कर रही हैं। ऐसा तब होता है जब पृष्ठ और प्रारंभिक पृष्ठ लोड को रीफ्रेश करना होता है। मैं छवि को "निरीक्षण तत्व" द्वारा दिखाया जा सकता हूं, फिर svg फ़ाइल पर राइट क्लिक करके और एक नए टैब में svg फ़ाइल खोलना। तब svg छवि मूल पृष्ठ पर प्रस्तुत की जाएगी।

<img src="../images/Aged-Brass.svg">

इस मुद्दे के बारे में पूरी तरह से नुकसान पर। एसवीजी छवि आईई 9 और एफएफ में ठीक है जो क्रोम या सफारी में नहीं है।

मेरे पास मेरे एमआईएम प्रकार भी सेट हैं। (छवि / svg + xml)

संपादित करें: यहां एक साधारण HTML पृष्ठ है जिसे मैंने अपनी समस्या को स्पष्ट करने में मदद के लिए बनाया है।

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

जैसा कि आप देख सकते हैं कि मैं एक आईएमजी टैग और सीएसएस में पृष्ठभूमि छवि के रूप में एक svg फ़ाइल का उपयोग करने की कोशिश कर रहा हूं। क्रोम या सफारी में प्रारंभिक पृष्ठ लोड पर न तो काम करें। जब मैं तत्व का निरीक्षण करता हूं तो एसवीजी पर क्लिक करें या किसी अन्य विंडो में svg लोड के लिए लिंक पर क्लिक करें, svg फ़ाइल मूल टैब में प्रस्तुत की जाएगी।


[Svg] टैग में चौड़ाई विशेषता जोड़ना (svg स्रोत XML संपादित करके) मेरे लिए काम किया: उदाहरण:

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

क्रोम बग की तरह दिखता है, मैंने कुछ और किया क्योंकि मैं लगभग इस वजह से पागल हो गया ... क्रोम डीबगर का उपयोग करके यदि आप svg ऑब्जेक्ट का सीएसएस बदलते हैं तो यह स्क्रीन पर दिखाता है।

तो मैंने जो किया था: 1. स्क्रीन आकार की जांच करें 2. मेरे एसवीजी ऑब्जेक्ट के "लोड" ईवेंट को सुनें 3. जब तत्व लोड होता है तो मैं jQuery 4 का उपयोग करके अपना सीएसएस बदलता हूं। यह मेरे लिए चाल है

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}
width: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>


मुझे एक ही समस्या थी और इसके मौजूदा जवाब लागू नहीं थे, या काम नहीं करते थे, लेकिन हम अन्य कारणों से उनका उपयोग नहीं कर सके। इसलिए मुझे यह पता लगाना पड़ा कि क्रोम हमारे एसवीजी के बारे में क्या नापसंद करता है।

हमारे मामले में यह पता चला कि एसवीजी फ़ाइल में symbol टैग की id विशेषता में एक था : इसमें क्रोम पसंद नहीं आया था। जैसे ही मैंने इसे हटा दिया : यह ठीक काम करता था।

खराब:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

अच्छा:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>

मैं एक परीक्षण पृष्ठ बनाने के लिए अपने नमूने का उपयोग करने में सक्षम था, और यह ठीक काम किया। मेरी धारणा यह है कि आपकी svg फ़ाइल में कुछ गड़बड़ है। क्या आप इसे यहां पेस्ट भी कर सकते हैं? यहां इस्तेमाल किया गया नमूना है।

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>

मैं यहाँ आया क्योंकि मुझे एक ही समस्या थी, छवि को प्रस्तुत नहीं किया जा रहा था। मुझे पता चला कि मेरे परीक्षण सर्वर का सामग्री प्रकार शीर्षलेख सही नहीं था। मैंने इसे .htaccess फ़ाइल में निम्न जोड़कर तय किया है:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

स्रोत: http://kaioa.com/node/45


मैंने शुरुआत में फ़ोटोशॉप सीसी से अपना एसवीजी निर्यात किया और मैन्युअल रूप से जोड़ना पड़ा

version="1.1" <svg> टैग में

क्रोम पर दिखने के लिए।


<object> उपयोग करें (बेशक, प्रत्येक यूआरएल को अपने आप से बदलें):

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>





svg