用于IE的img修复程序中的SVG破坏Chrome

Question

所以我在我最近的网站上为一个非常友好的设计徽标做了一个SVG。更多的是“这很酷”，而不是绝对必要，但现在它不起作用，我很痴迷。

我把它放在一个<img />标签上，根据我的喜好调整大小，然后在几个地方使用不同大小的标志，标志很漂亮。啊现代网络的奇迹啊。记住.PNG修复？我们在短短几年内走了很长一段路。我很高兴我们不再需要处理那种古老的IE欺诈......

哦，你一定是在开玩笑吧！

显然IE很时髦。好吧，谷歌这件事。 “删除高度和宽度属性。”太棒了，那样做......

Chrome在修改后的文件中遇到了同样的问题。哎呀。

我做错了什么？

<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> attrubite。

第一个样式为内联样式，第二个样式为<style>标记。

代码：

＆＃13;

＆＃13;

<?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>

＆＃13;

＆＃13;

＆＃13;