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

回答

相關問題