Полная ширина SVG с сохранением пропорций изображения

У меня есть изображение svg, которое я хочу автоматически изменить до 100% ширины. Проблема в том, что я разместил изображение (100 x 100 пикселей) слева от этого svg, и это изображение должно сохранять свои пропорции.

Я пробовал это с помощью 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% ширины, начиная с конца этого рисунка.

Надеюсь, кто-нибудь сможет мне помочь: /


svg html css responsive-design viewbox
person Dario Tilgner    schedule 20.10.2014    source источник
comment
Эта статья, вероятно, может объяснить ваши проблемы больше, чем краткий ответ.   -  person Zach Saucier    schedule 20.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете поместить изображение в 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;
}

Демо здесь

person Paul LeBeau    schedule 21.10.2014