固定サイズのSVG背景画像

Question

私は、背景画像付きのテキストボックスの上に置いてみようとしています。この形状は、異なるサイズの容器に入れられ、それに応じてスケールされます。私が抱えている問題は、背景画像の尺度でもあり、クリップパスを使わずに同じサイズを維持したいと思っています。私が言っていることのコードを見てください。これは私を夢中にさせている！

.container { 
 
    width: 75%; 
 
} 
 

 
.box { 
 
    background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg"); 
 
    padding-top: 5px; 
 
    padding-left: 25px; 
 
    padding-right: 20px; 
 
    padding-bottom: 5px; 
 
    margin-top: -5px; 
 
} 
 

 
p { 
 
    color: white; 
 
}

<div class="container"> 
 

 
<svg width="100%" height="auto" viewBox="375 265 1268 45.3"> 
 
    
 
    <defs> 
 
<pattern id="img1" height="30%" width="30%" 
 
     patternContentUnits="objectBoundingBox" 
 
     viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"> 
 
    <image height="1" width="1" preserveAspectRatio="xMidYMid slice" 
 
      xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" /> 
 
</pattern> 
 
</defs> 
 
    
 
    <path d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" /> 
 
</svg> 
 

 
<div class="box"> 
 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde 
 
    </p> 
 
    
 
    </div>

あなたは、コンテナの割合の大きさを変更する場合は、私が話しているか見ます。

ありがとうございました！

Answer 1

まず、SVGのviewBoxを取り除く必要があります。そのため、SVGは拡大縮小され、SVG内のすべてに影響を与えます。また、パターンを1：1にすると、patternContentUnits="userSpaceOnUse"に切り替わり、実際のサイズでパターンが使用されます。

overflow:hiddenも使用しているため、非スケーリングSVGは親SVGをより広くすることはありません。

これはあなたを近づけます。パターンは1：1になりましたが、異なるパターンの起源を持っているため、HTMLと正確に一致しません。パターンが正しく整列するまで、パターンのxとyの属性を調整することで調整できます。私はあなたにそれを残すでしょう。

.container { 
 
    width: 75%; 
 
    overflow: hidden; 
 
} 
 

 
.box { 
 
    background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg"); 
 
    padding-top: 5px; 
 
    padding-left: 25px; 
 
    padding-right: 20px; 
 
    padding-bottom: 5px; 
 
    margin-top: -5px; 
 
} 
 

 
p { 
 
    color: white; 
 
}

<div class="container"> 
 

 
<svg width="1268" height="45.3"> 
 
    <defs> 
 
<pattern id="img1" patternUnits="userSpaceOnUse" width="881" height="192"> 
 
    <image width="881" height="192" 
 
      xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" /> 
 
</pattern> 
 
</defs> 
 
    
 
    <path transform="translate(-375 -265)" 
 
     d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" /> 
 
</svg> 
 

 
<div class="box"> 
 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde 
 
    </p> 
 
    
 
    </div>