SVG 全宽，同时保持 img 比例答案

【问题标题】：SVG full Width, while keeping img proportionsSVG 全宽，同时保持 img 比例
【发布时间】：2014-12-15 10:14:23
【问题描述】：

我有一个 svg 图像，我想将其自动调整为 100% 宽度。问题是，我在该 svg 的左侧放置了一个图像（100 像素 x 100 像素），并且该图片必须保持其比例。

我用 viewBox 试过了，但是用这个方法，整个 svg，而不仅仅是路径，都会被调整大小。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 100" preserveAspectRatio="none" style="-webkit-user-select: auto;">
 <g>
  <title>title</title>
  <image x="0" y="1.00001" width="100" height="100" id="svg_1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goUDAEUe/ATzgAAAkNJREFUeNrtnetugkAQRr8hJH3/tzWt7PRHxQuyN4qw6DlJo7GK7Jy9zdBQkxS0DJPkl0e44ZPYVMVo/AA0QkcIEAIIQQggBCGAEIQAQhAypvtk7A0wVzqhPtWYENiRnhBU4QWdu/SREVIQ7Np4eIGU1Pe4bpc/XJL39O6H33kigKnjWOYYc8d0SYOks6Sfy0/oF/aCIwW89HWfPO9merMSvT62IYq9dv/8W9JJ0qkvbKQ1OLXkgloiJLXLnLbdIlNTbrqyzDIRJH2N0o+2hnjlSPbKxVcrvL+2PePUNUgajiLEC4OlfwZsrxzsOuW1LGTt3khiCPVQXEQIIAQhgJA3oala1t2Wb0mhb6tTbG7b65mEzUoacF9XeHpT12kIYdgwwLaXgP8IydV8Hhpgk8bEsrtoRMw0uJ8nyWG4TLNBZdcdUh3FWhCwVEhp0c5iMnKtjUXHzRTcBy274FMS9FaqAP7XDZfP075WDyupj/h660nT5RhKJ2x7ASEIAYQgBBDyASytZXks+atJ/GqTHIRUxCn2dzmGhKdsXIniRd/KWb5RwEsmClt7yio+C4+MljcdDVYzGmIHoHTCLgsQghBACEIAIQgBhCAEEAIIQQggBCGAEIQAQhACCAGEIAQQghBACEIAIQgBhABCEAIIQQggBCGAEIQAQgAhCAGEHBT+bd4LuNyNwTPvud7ZwZ8/CxvxcCvYuVuNvFRI6sYf0MAagowd1hBbWYR9mOBNpixGRiNCgDwEIYAQhABCEAIIAYS0zy9dWbdrK07bIAAAAABJRU5ErkJggg=="/>
  <path style="-webkit-user-select: auto;" stroke="#000000" fill="#FF0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m98.66982,67.61566c0,0 136.5026,-1.32306 303.78312,-30.42615c167.28064,-29.10306 238.87799,-14.55161 238.20886,-14.55161c-0.66913,0 1.33826,79.37253 1.33826,79.37253c0,0 -543.33026,1.32291 -543.99939,1.32291c-0.66912,0 0.66915,-35.71768 0.66915,-35.71768z" id="svg_10"/>
 </g>
</svg>

为了使用我得到的 svg

<div class="svg">
    <p>tesygst</p>
</div>

和

.svg {
  background: url(pathToSvg.svg) no-repeat bottom left;
  position : fixed;
  bottom : 0;
  left : 0;
  height : 100px;
  width : 100%;
}

img 必须放置在左下角，而路径必须从该图片的末尾开始自行延伸到 100% 宽度。

希望有人可以帮助我：/

【问题讨论】：

This article 可能比这里的简短回答更能解释您的问题

标签： html css svg responsive-design viewbox

【解决方案1】：

您不能将图像放在 SVG 中，拉伸 SVG 并让图像也不拉伸。事情就是这样运作的。您必须考虑 SVG 的内容，就像您谈论的是 <img> 而不是 SVG。你拉伸 img，整个东西都会拉伸。

我认为您试图将图像保持在 100x100 像素？

您需要将图像移出 SVG 并移入 HTML。然后使用 CSS 将其放置在正确的位置。例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 100" preserveAspectRatio="none" style="-webkit-user-select: auto;">
 <g>
  <title>title</title>
  <path style="-webkit-user-select: auto;" stroke="#000000" fill="#FF0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m98.66982,67.61566c0,0 136.5026,-1.32306 303.78312,-30.42615c167.28064,-29.10306 238.87799,-14.55161 238.20886,-14.55161c-0.66913,0 1.33826,79.37253 1.33826,79.37253c0,0 -543.33026,1.32291 -543.99939,1.32291c-0.66912,0 0.66915,-35.71768 0.66915,-35.71768z" id="svg_10"/>
 </g>
</svg>

<img width="100" height="100" src="data:image/png;base64,..."/>

CSS：

IMG {
    position: relative;
    top: -100px;
}

Demo here

【讨论】：