html - 在 svg 中拟合图像 bg

Question

大家好我正在尝试在 svg 文件中设置图像 bg，但我需要它适合中心填充高度但保持它的外观。

这是我到目前为止得到的。问题是我错过了一些东西。如果我更改背景大小以覆盖它，但 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>

标签： htmlcsssvg