it-swarm.dev

دائمًا ما يتمركز وضع صورة الخلفية svg في Internet Explorer ، على الرغم من وضع الخلفية: المركز الأيسر ؛

أنا أستخدم شعار SVG كصورة خلفية ولا يمكنني جعله محاذاة بشكل صحيح إلى اليسار في Internet Explorer (تحرير: و Safari) .

الحاويات تبدو هكذا:

<div id="header">
    <div id="logo"></div>
</div>

مع الأنماط:

#header{
    width: 100%;
    max-width: 1200px; 
    height: 100%;}

#logo{
    background: url(../images/ss_logo.svg);
    background-position: left center;
    width: 100%;
    height: 100%;
    float: left;}

يمكنك أن ترى أن <div> يجب أن يمتد بنسبة 100٪ من أصله لكن مع عرض الشعار على يسار العنصر. يعمل هذا بشكل جيد في Chrome و Safari ، لكن الشعار يتركز دائمًا داخل <div id="logo"> في IE.

يبدو أن المعلومات يصعب العثور عليها في هذا الصدد ، هل واجه أي شخص آخر نفس المشكلة؟

فيما يلي رابط إلى مثال على إصدار المشكلة ، المربع الأخضر هو SVG.

67
bluefantail

المشكلة ليست مع CSS الخاص بك ولكن مع SVG الخاص بك. ستنمو SVG لملء خلفية مربع العنصر بالكامل (كما هو متوقع). كيف يصبح مقياس SVG هو العامل المسيطر:

قم بتعيين سمة viewBox="0 0 width height" (بالبكسل) على عنصر <svg> الخاص بك وإزالة سماتها width و height. تحتاج أيضًا إلى تعيين preserveAspectRatio="xMinYMid" (x/محاذاة إلى اليسار عموديًا ، ص/محاذاة أفقيةً متوسطة) على عنصر svg. هذا يعمل مع Internet Explorer 10 و 11 ، على الأقل.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

تعرف على المزيد حول preserveAspectRatio و viewBox السمات. المصدر ، "الشروع في العمل مع SVG" في IEblog .

147
Aeyoun

في حالتي مضيفا "عرض" و "ارتفاع" - قيم حل المشاكل على ie9-11.

16
Marcus Mori Morba

الجواب مقبول يعمل ، ولكن هنا حل آخر.

بما في ذلك الأبعاد في SVG بحيث تكون متطابقة مع أبعاد صندوق العرض ، فإن الحيل أيضًا.

width="496px" height="146px" viewBox="0 0 496 146" 

إذا كنت مثلي وقمت بتحرير/حفظ ملفات SVG الخاصة بك في Illustrator ، فقم بإلغاء تحديد مربع الاختيار "استجابة" في "الخيارات المتقدمة" في مربع الحوار "حفظ". ثم سيتم تضمين الأبعاد.

(نظرًا لأنه قابل للتطوير ، يكون "متجاوبًا" بحكم التعريف. لذلك يبدو هذا الإعداد متكررًا بعض الشيء.)

12
Dennis Best

إذا قدمنا ​​حجم الخلفية ، فسوف يعمل في IE

أدناه هو رمز عينة

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
10
Thomas Mathew

IE 8-11 ، عند وضع SVG في خلفية بدون تكرار ، يقوم تلقائيًا بتحريك الجانب الأيسر والأيمن لتكبيره ليناسب. هذا يخلق تأثير توسيط الصورة ، على مستوى الصورة. المعنى: يوسع المساحة البيضاء على جانبي الصورة لملء الحاوية.

الصورة الجديدة ثم 100 ٪ عرض عنصرها. هذا هو السبب في الموقف: اليسار ليس له تأثير ، فإنه يتم ترك بالفعل مع الحشوة المدرجة.

يجب تقييد الحاوية الخاصة بعنصر الخلفية للحيلولة دون التمدد الزائد (عبر الحز). على سبيل المثال: أقصى عرض

div#logo{
    background-image: url(/img/logo.svg) no-repeat;
    max-width: 140px;
    margin: 0 auto auto 0;
}

ستظل الصورة مركّزة في حدود 140 بكسل ، لكنها لن تطفو بعد ذلك.

5
ppostma1