首页 文章

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

提问于
浏览 次
1

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

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

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

在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没有）

css svg responsive-design

2 回答

  • 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> ，但原因是相同的 .

    回复于
  • 3

    规模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错误

    这将缩放元素，但保持<svg>图像的宽高比 .

    例：

    .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！
    他们"dont scale"的原因如前所述
    实际上有一个属性： preserveAspectRatio

    我该如何使用这个属性？
    WEL：

    .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>
    回复于

相关问题