Блог

Главная - Вопросы по программированию - подгонка изображения bg в svg

подгонка изображения bg в svg

#html #css #svg

#HTML #css #svg

Вопрос:

Привет всем, я пытаюсь установить изображение bg в файл svg, но мне нужно, чтобы оно помещалось в центр, заполняя высоту, но сохраняя ее аспект.

Это то, что я получил до сих пор. Проблема в том, что я чего-то не хватает. если я изменю размер фона, чтобы покрыть его, это сработает, но тогда bg будет шире, чем размер svg. Есть идеи?

 <svg class="main" width='283' height='545' version='1.1' viewBox='0 0 283 545' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns#' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>
  <metadata>
  <style>
    .main {
        height: 545;
        width: 283;
        background: url("https://images.unsplash.com/photo-1606225457115-9b0de873c5db") no-repeat 100% 100%, none;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 283px 545px;

    }
  </style>
  <rdf:RDF>
    <cc:Work rdf:about=''>
    <dc:format>image/svg xml</dc:format>
    <dc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/>
    <dc:title/>
    </cc:Work>
  </rdf:RDF>
  </metadata>
  <g>
  <path transform='scale(-1,1) matrix(1,0,0,1,-275,0)' d='m140 379 66 35a17 17 58 019 15l.5 49a16 16 121 01-9 14.4l-79 39a20 20 180 01-17.9.6l-35-17a16 16 58 01-9-14.7l-0-80a17 17 120 019-14.838l47-26a19 19 180 0118-1z' fill='#e782b8'/>
  <g transform='scale(1.8,1) matrix(1,0,0,1,-115,0)' fill='#e782b8' fill-rule='evenodd'>
    <rect x='210' width='50' height='280'/>
    
  </g>
  
  </g>
</svg>
Метки: