【问题标题】：Making SVG Responsive based on width 100% like images基于宽度 100% 的图像使 SVG 具有响应性
【发布时间】：2015-07-22 04:31:26
【问题描述】：

我整天都在致力于使 SVG 具有响应性并阅读各种文章，并测试不同类型的代码，即使在堆栈溢出时也是如此。不幸的是，我没有成功让我的 svg 基于容器 div 展开，就像我通常在定义 max-width:100% 时对图像所做的那样

我使用 SVG 堆栈作为技术： http://simurai.com/blog/2012/04/02/svg-stacks/ 他的代码示例：http://jsfiddle.net/simurai/7GCGr/

我注意到，在 svg 达到一定尺寸后，它不再扩展，即使我将其 100% 作为宽度，他的最大尺寸也变为 150px。如果我通过插入宽度和高度尺寸来强制它变大，但这不是我想要的。我希望它总是根据容器的宽度调整大小，甚至变得非常巨大而没有任何大小限制。

在 svg 中，高度和宽度被删除。

我的代码：

		/* RESET - http://meyerweb.com/eric/tools/css/reset/ */
		html, body, applet, object, iframe, svg, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure{
			margin:0; padding:0; border:0; font-size:100%; font-weight:inherit; font-style:inherit;
			font-family:inherit; text-decoration:inherit; text-align:left; background:transparent;
		}
		header, footer, figure, details, hgroup, section, article, nav, aside{display:block;}
		img, object, audio, video, svg{width:100%;}

	    .vector{display:block; width:100%; height:auto;}
        .vector embed{border:1px solid #f00; width:100%;}*/
	    .box{border:1px solid #f00; width:700px;}

<div class="box">
	<object class="vector">
		<embed src="http://life-is-simple.net/sprite.svg#winner-cup" />
	</object>
    
	<img class="vector" src="http://life-is-simple.net/sprite.svg#winner-cup">
	<img class="vector" src="http://life-is-simple.net/sprite.svg#lottery-ticket">
	<img class="vector" src="http://life-is-simple.net/sprite.svg#monitor-number">
	<img class="vector" src="http://life-is-simple.net/sprite.svg#emblem">
</div>

我真的很感激一些帮助，我不知道再测试什么才能让它工作，特别是当我看到插入的简单包含 svg 时，它们确实 100% 运行，我正在尝试使用和技术，但我没有看到任何区别（只有 IE 可以扩展 svg，但 firefox 和 chrome 不会）

【问题讨论】：

embed 在大多数浏览器中不支持是吗？ - sitepoint.com/add-svg-to-web-page
我正在阅读这篇文章：smashingmagazine.com/2014/11/03/…，其中谈到了嵌入（但我认为我忽略了几点，我只是测试一下在不同实现中使用 svg 的效果），但我认为这个解决方案是更好的选择stackoverflow.com/questions/4476526/…

标签： css svg responsive-design

【解决方案1】：

您的图片无法缩放的原因是它没有 viewBox。

您正在链接到 <g> 元素。该组位于具有viewBox 的 SVG 内，但不会使用该 viewBox。浏览器会在最外层的<svg> 元素上寻找一个viewBox。该元素没有。

为了证明我的观点，将获胜者杯视图框复制到根/最外层 <svg> 元素。 SVG 现在将缩放到 100%。

<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 971.9 842.9">

至于为什么它只缩放到 150px 的高度。你会在这里找到答案：

SVG height percentage not working under Linux browsers?

在您的情况下，父元素是<embed>（和<object>）而不是<body>，但原因是一样的。

【讨论】：

谢谢。如此简单的事情我完全错过了，我认为其他 svgs 的 svg 容器不需要视图框，因为已经在每个视图框内定义了，相反它是相反的：-/ 应用视图框解决了这个问题。再次感谢您。

【解决方案2】：

缩放 svg 如何：

您可以设置 svg 容器的宽度，以便图像在之后缩放：

这需要：

svg 元素需要一个 viewBox
svg 元素宽高均为 100%

.container1 {
  border: 1px solid green;
  display: inline-block;
  width: 100px;
}
.container1 .shape1 {
  width: 100%;
}
.container2 {
  border: 1px solid green;
  display: inline-block;
  width: 200px;
}
.container2 .shape2 {
  width: 100%;
}

<div class="container1">
  width set to 100px
  <svg class="shape1" viewBox="0 0 100 100">
    <circle fill="#15d" cx="50" cy="50" r="50" />
  </svg>
</div>
<div class="container2">
  width set to 200px
  <svg class="shape2" viewBox="0 0 100 100">
    <circle fill="#a2b" cx="50" cy="50" r="50" />
  </svg>
</div>

commen 错误

这将缩放元素，但保持

例子：

.text span {
  display: inline-block;
  border: 1px solid rgba(0,0,0, 0.2);
}
.text span:nth-child(2) {
  margin-left: 110px;
}
.container1 {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 200px;
}
.container1 .shape1 {
  width: 100%;
  height: 100%;
}
.container2 {
  margin-left: 100px;
  display: inline-block;
  border: 1px solid green;
  width: 200px;
  height: 100px;
}
.container2 .shape2 {
  width: 100%;
  height: 100%;
}

<div class="text"><span>width set to 100px<br> height set to 200px</span>
<span>width set to 200px
<br>height set to 100px</span><div>
<div class="container1">

  <svg class="shape1" viewBox="0 0 100 100">
    <circle fill="#15d" cx="50" cy="50" r="50" />
  </svg>
</div>

<div class="container2">

  <svg class="shape2" viewBox="0 0 100 100">
    <circle fill="#a2b" cx="50" cy="50" r="50" />
  </svg>
</div>

元素不要缩放！
他们“不缩放”的原因是如前所述的纵横比
实际上有一个属性：preserveAspectRatio

如何使用此属性？
嗯：

.text span {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.text span:nth-child(2) {
  margin-left: 110px;
}
.container1 {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 200px;
}
.container1 .shape1 {
  width: 100%;
  height: 100%;
}
.container2 {
  margin-left: 100px;
  display: inline-block;
  border: 1px solid green;
  width: 200px;
  height: 100px;
}
.container2 .shape2 {
  width: 100%;
  height: 100%;
}

<div class="text"><span>width set to 100px<br> height set to 200px</span>
  <span>width set to 200px
    <br>height set to 100px</span>
</div>
<div class="container1">

  <svg class="shape1" viewBox="0 0 100 100" preserveAspectRatio="none">
    <circle fill="#15d" cx="50" cy="50" r="50" />
  </svg>
</div>

<div class="container2">

  <svg class="shape2" viewBox="0 0 100 100" preserveAspectRatio="none">
    <circle fill="#a2b" cx="50" cy="50" r="50" />
  </svg>
</div>

【讨论】：