缩放svg如何：

Question

我整天都在努力使SVG响应并阅读各种文章，并在堆栈溢出时测试不同类型的代码。不幸的是，我没有按照容器div进行svg扩展，就像我在定义max-width时通常用图像做的那样：100％

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

我注意到在经过一定尺寸的svg后，它不会再膨胀，即使我给它100％的宽度，它的最大尺寸也会变成150px。如果我通过插入宽度＆amp;高度大小它变大了，但它不是我想要的。我希望它根据容器的宽度调整ALWAYS，甚至可以在没有任何尺寸限制的情况下变得非常庞大。

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

我的代码：

＆＃13;

		/* 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;}

＆＃13;

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

＆＃13;

我真的很感激一些帮助，我不知道该怎么测试才能使它工作呢，特别是当我看到简单的包含svg插入他们确实100％，我尝试和技术，但我没有看到任何差异（只有IE表现出扩展svg，但firefox和chrome没有）

Answer 1

缩放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错误

这将缩放元素，但保持＆lt; svg＆gt;的宽高比。图像。

示例：

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

优秀的DONT SCALE！
他们“不缩放”的原因如前所述，长宽比为
实际上有一个属性： http://en.wikipedia.org/wiki/HTTPS

我如何使用这个属性？
韦尔：

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

Answer 2

图像无法缩放的原因是因为它没有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>，但原因是相同的。

根据宽度100％像图像一样制作SVG响应

2 个答案:

缩放svg如何：

commen错误