SVG全宽，同时保持img比例

我有一个svg图像，我想自动调整为100％的宽度。问题是，我已经在该svg的左侧放置了一个图像（100px x 100px），并且该图片必须保持其比例。SVG全宽，同时保持img比例

我试过用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>

对于使用我有

<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必须放置在左下角的SVG，同时，这条道路本身延伸到100％宽度从该图片的末尾开始。

希望有人能帮助我：/

来源

2014-10-20 John Doehohohoho

[本文]（http://sarasoueidan.com/blog/svg-coordinate-systems/）可能可以解释一下你的问题这里不仅仅是一个简短的答案 – 2014-10-20 13:48:42

你不能把图像的SVG里，舒展SVG，并有图像也不会伸展。这就是事情的工作方式。您必须像思考一个<img>而不是SVG那样思考SVG的内容。你拉伸img，整个事情延伸。

我认为你试图保持图像在100x100px？

您需要将图像移出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

来源

2014-10-21 06:43:47

SVG全宽，同时保持img比例

回答

相关问题