SVG в IMG исправить для IE ломает Chrome

Question

Так что я сделал SVG для очень удобного для svg дизайна логотипа на моем недавнем веб-сайте.Больше как «ах это круто», чем абсолютная необходимость, но теперь, когда это не работает, я одержим.

Я поместил его в тег <img />, измерил его, как мне нравится, и приятный логотип BAM, используемый в нескольких размерах в нескольких местах, прекрасно масштабируется.Ах, чудеса современной сети.Помните .PNG исправления?Мы прошли долгий путь за несколько коротких лет.Я так счастлив, что нам больше не нужно иметь дело с этой архаичной фигней IE ...

О, ты, должно быть, шутишь!

Так что, очевидно, IE становится фанком.Хорошо, Google это вещь."Удалить атрибуты высоты и ширины."Фантастика, сделай это ...

В Chrome возникает та же проблема с измененным файлом.Argh.

Что я делаю не так?

<svg width="264" height="264" xmlns="http://www.w3.org/2000/svg">
 
     <g>
      <title>background</title>
      <rect x="-1" y="-1" width="266" height="266" id="canvas_background" fill="none"/>
      <g id="canvasGrid" display="none">
       <rect id="svg_1" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/>
      </g>
     </g>
     <g>
      <title>Layer 1</title>
      <ellipse fill="#000000" stroke-width="0" cx="132.081358" cy="132.179138" id="svg_3" rx="132" ry="132" stroke="#fff"/>
      <ellipse fill="#000000" stroke="#fff" stroke-width="6" cx="132.081346" cy="132.17914" id="svg_5" rx="126" ry="126"/>
      <ellipse fill="#000000" stroke="#fff" stroke-width="7" cx="132.081365" cy="213.774884" id="svg_13" rx="44" ry="44"/>
      <line fill="none" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="12.496805" y1="168.812302" x2="251.665903" y2="168.812302" id="svg_24" stroke-linejoin="null" stroke-linecap="null" stroke="#fff"/>
      <ellipse fill="#d80202" stroke="#fff" stroke-width="7" cx="132.081369" cy="50.410766" id="svg_6" rx="44" ry="44"/>
      <line fill="none" stroke="#fff" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="132.08135" y1="95.543239" x2="132.08135" y2="166.831116" id="svg_26" stroke-linejoin="null" stroke-linecap="null"/>
     </g>
    </svg>

Answer 1

Попробуйте использовать один из этих SVG и настроить его, чтобы он реагировал, удалите атрибуты height и width из тега <svg>.

Первый имеет встроенный стиль, а второй - в теге <style>.

код:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<g>
	<title>background</title>
	<rect id="canvas_background" x="-1" y="-1" style="fill:none;" width="266" height="266"/>
	<g id="canvasGrid" style="display:none;">
		<rect id="svg_1" style="display:inline;fill:none;" width="264" height="264"/>
	</g>
</g>
<g>
	<title>Layer 1</title>
	<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
	<ellipse id="svg_5" style="stroke:#FFFFFF;stroke-width:6;" cx="132.1" cy="132.2" rx="126" ry="126"/>
	<ellipse id="svg_13" style="stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="213.8" rx="44" ry="44"/>
	<line id="svg_24" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
	<ellipse id="svg_6" style="fill:#D80202;stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="50.4" rx="44" ry="44"/>
	<line id="svg_26" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>

<br />
<br />

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<style type="text/css">
	.st0{fill:none;}
	.st1{display:none;}
	.st2{display:inline;fill:none;}
	.st3{stroke:#FFFFFF;stroke-width:6;}
	.st4{stroke:#FFFFFF;stroke-width:7;}
	.st5{fill:none;stroke:#FFFFFF;stroke-width:7;}
	.st6{fill:#D80202;stroke:#FFFFFF;stroke-width:7;}
</style>
<g>
	<rect id="canvas_background" x="-1" y="-1" class="st0" width="266" height="266"/>
	<g id="canvasGrid" class="st1">
		<rect id="svg_1" class="st2" width="264" height="264"/>
	</g>
</g>
<g>
	<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
	<ellipse id="svg_5" class="st3" cx="132.1" cy="132.2" rx="126" ry="126"/>
	<ellipse id="svg_13" class="st4" cx="132.1" cy="213.8" rx="44" ry="44"/>
	<line id="svg_24" class="st5" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
	<ellipse id="svg_6" class="st6" cx="132.1" cy="50.4" rx="44" ry="44"/>
	<line id="svg_26" class="st5" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>