使 SVG 响应基于宽度 100% 像图像

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。如果我通过插入宽度和高度尺寸强制它变得更大，但这不是我想要的。我希望它始终根据容器的宽度调整大小，甚至在没有任何大小限制的情况下变得非常巨大。

在 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 不会）

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>

常见错误

这将缩放元素但保持

示例：

.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" 的原因如前所述，纵横比
实际上有一个属性：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>

Answer 2

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

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

为了证明我的观点，将 winner-cup viewBox 复制到 root/outermost <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的高度。你会在这里找到答案：

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

使 SVG 响应基于宽度 100% 像图像

Making SVG Responsive based on width 100% like images

css

svg

responsive-design

如何缩放 svg：

常见错误