फ़ायरफ़ॉक्स एसवीजी प्रतीक परिवर्तन - सीएसएस, फ़ायरफ़ॉक्स, एसवीजी, प्रतीक

एसवीजी प्रतीकों और स्थिति का उपयोग करते समय मुझे फ़ायरफ़ॉक्स में अप्रत्याशित व्यवहार हो रहा है: परिवर्तन के साथ पूर्ण: अनुवाद ();

यह केवल फ़ायरफ़ॉक्स में हो रहा है, नहींआईई या क्रोम। मुझे यह भी यकीन है कि मुझे पहले इस मुद्दे को नहीं मिला था, तो शायद एक नया मुद्दा / बग है? वर्तमान में 43.0.4 (विंडोज़) का उपयोग कर और 44.0.2 (लिनक्स) में भी परीक्षण किया है।

में यह प्लंकर मैं मानचित्र सूचक, सर्कल और वर्ग की अपेक्षा करता हूंसभी को बाउंडिंग बॉक्स के भीतर केंद्रीय रूप से तैनात किया जाना चाहिए। हालांकि, फ़ायरफ़ॉक्स में नक्शा सूचक सही ढंग से स्थित नहीं है। नक्शा सूचक एक एसवीजी प्रतीक है।

अद्यतन करें: यह मुद्दा केवल तभी दिखता है जब एसवीजी को सीएसएस चयनकर्ता के रूप में svg {} का उपयोग करके रखा जाता है। यह अपेक्षित रूप से काम करता है अगर यह .icon {} चयनकर्ता के माध्यम से स्टाइल किया गया है।

कोड:

#svg-sprite{
position: absolute;
width: 0;
height: 0;
}

.rect{
position: relative;
width: 400px;
height: 400px;
background: #f00;
}

svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
fill: #fff;
opacity: 0.5;
}

.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: #0f0;
border-radius: 50%;
opacity: 0.5;
}

.square{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
fill: #0f0;
opacity: 0.5;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>

<svg id="svg-sprite">
<symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
</svg>

<p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>

<div class="rect">
<svg class="icon"><use xlink:href="#map_pointer" /></svg>

<div class="circle"></div>

<svg class="square" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>

</html>

उत्तर:

जवाब के लिए 2 № 1

मैंने अभी सीएसएस हटा दिया है परिवर्तन वहाँ से svg फिर व्यवस्था करें चोटी तथा बाएं। यह फ़ायरफ़ॉक्स में भी काम कर रहा है। मुझे लगता है कि यह वह उत्तर हो सकता है जिसकी आप उम्मीद कर रहे हैं।

#svg-sprite{
position: absolute;
width: 0;
height: 0;
}

.rect{
position: relative;
width: 400px;
height: 400px;
background: #f00;
}

svg{
position: absolute;
top: 25%;
left: 25%;
width: 200px;
height: 200px;
fill: #fff;
opacity: 0.5;
}

.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: #0f0;
border-radius: 50%;
opacity: 0.5;
}

.square{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
fill: #0f0;
opacity: 0.5;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>

<svg id="svg-sprite">
<symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
</svg>

<p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>

<div class="rect">
<svg class="icon"><use xlink:href="#map_pointer" /></svg>

<div class="circle"></div>

<svg class="square" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>

</html>


उत्तर № 2 के लिए -1

शीर्षक

यहां मैंने आपके कोड में कुछ बदलाव किए हैं और यह ठीक काम करता है कुछ सीएसएस 3 गुणों को विक्रेता विशिष्ट संपत्ति मानों की आवश्यकता होती है जैसे परिवर्तन की ज़रूरतें -moz-transform मोज़िला में काम करने के लिए -o-transform ओपेरा में काम करने के लिए -webkit-transform सफारी और क्रोम के साथ काम करने के लिए और कुछ महत्वपूर्ण मामले में आपको सीएसएस 3 प्रॉपर्टीज का उपयोग करते समय बेस स्टेटमेंट जोड़ना पड़ सकता है क्योंकि सीएसएस 3 गुणों में से कुछ आईई 8 या उससे कम के साथ काम नहीं करते हैं

#svg-sprite{
position: absolute;
width: 0;
height: 0;
}

.rect{
position: relative;
width: 400px;
height: 400px;
background: #f00;
}

svg{
position: absolute;
top: 25%;
left: 25%;
-webkit-transform: translate(0% , 0% );
-moz-transform: translate(0% , 0% );
-ms-transform: translate(0% , 0% );
-o-transform: translate(0% , 0% );
transform: translate(0% , 0%);
width: 200px;
height: 200px;
fill: #fff;
opacity: 0.5;
}

.circle{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50% , -50%);
-moz-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
-o-transform: translate(-50% , -50%);

width: 200px;
height: 200px;
background: #0f0;
border-radius: 50%;
opacity: 0.5;
}

.square{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50% , -50%);
-moz-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
-o-transform: translate(-50% , -50%);

width: 200px;
height: 200px;
fill: #0f0;
opacity: 0.5;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>

<svg id="svg-sprite">
<symbol viewBox="0 0 42 60" id="map_pointer"><title>map_pointer</title><path d="M21 .254C9.52.254.178 9.594.178 21.076c0 11.153 19.208 37.167 20.026 38.27.187.25.483.4.796.4.313 0 .61-.15.796-.4.818-1.103 20.026-27.117 20.026-38.27C41.822 9.596 32.482.254 21 .254zM21 30c-4.92 0-8.924-4.003-8.924-8.924 0-4.92 4.003-8.923 8.924-8.923 4.92 0 8.924 4.002 8.924 8.923C29.924 25.996 25.92 30 21 30z"/></symbol>
</svg>

<p>SVG icon should be positioned in centre of rectangle. In Firefox this is not the case</p>

<div class="rect">
<svg class="icon"><use xlink:href="#map_pointer" /></svg>

<div class="circle"></div>

<svg class="square" width="200" height="200">
<rect width="200" height="200" />
</svg>
</div>
</body>

</html>

और अगर भविष्य में यदि आपको कुछ समान मिल जाए तोकठिनाइयों का निरीक्षण तत्व का उपयोग करें और जांचें कि वांछित सीएसएस वर्ग तत्व के लिए लागू है या नहीं और अधिकांश मामलों का निरीक्षण तत्व आपको उचित त्रुटि संदेश भी देगा


संबंधित सवाल
सबसे लोकप्रिय