用于 IE 的 img 修复中的 SVG 破坏了 Chrome答案

【问题标题】：SVG in img fix for IE breaks Chrome用于 IE 的 img 修复中的 SVG 破坏了 Chrome
【发布时间】：2018-05-13 04:58:07
【问题描述】：

所以我在我最近的网站上为一个非常适合 svg 的设计徽标制作了 SVG。与其说是绝对必要，不如说是“啊，这很酷”，但现在它不起作用，我很着迷。

我把它放在<img /> 标签中，按我喜欢的大小调整它的大小，并且在几个地方以不同大小使用的 bam sweet 标志，缩放精美。啊，现代网络的奇迹。还记得 .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>

【问题讨论】：

那么您是否尝试调整 SVG 的大小并使其保持响应？
@Adam 我将 .svg 文件保存为服务器上的资产，并在 <img src="myimg.svg" /> 标记中提供它，试图将其视为普通图像资产。但是，是的，调整它的大小并保持响应。

标签： html css svg

【解决方案1】：

尝试使用这些 SVG 之一并调整它以使其响应从 <svg> 标记中删除 height 和 width 属性。

第一个具有内联样式，第二个具有 <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>

【讨论】：