SVGパターンを非応答にするには？

Question

私は以下のSVGを持っています。サイズは表示される場所によって異なります。

円がどれくらい大きいか小さいかにかかわらず、パターンを一定のサイズで保持したいと思います。

これは可能ですか？

感謝:)

<svg id="bg-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="top: -219px; left: 0px; width: 3805px;"> 
 
     <defs> 
 
      <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28"> 
 
       <rect width="28" height="28" style="fill:#002a3a"></rect> 
 
       <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
       <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
       <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
       <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
       <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
       <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
       <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      </pattern> 
 
     </defs> 
 
\t \t <circle cx="50" cy="50" r="50" style="fill:url(#a);"></circle> 
 
    </svg>

Answer 1

はthis.Itが100％反応する試してみてください。あなたの解決策を見つけることを願っています。

.svg-container { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t padding-bottom: 100%; 
 
\t vertical-align: middle; 
 
\t overflow: hidden; 
 
} 
 
.svg-content { 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
}

<div class="svg-container" id="bg-circle"> 
 
    <svg version="1.1" viewBox="0 0 500 500" 
 
preserveAspectRatio="xMinYMin meet" class="svg-content"> 
 
    <defs> 
 
     <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28"> 
 
      <rect width="28" height="28" style="fill:#002a3a"></rect> 
 
      <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
      <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.03"></circle> 
 
     </pattern> 
 
    </defs> 
 
    <circle cx="100" cy="100" r="100" style="fill:url(#a);"></circle> 
 
    </svg> 
 
</div>

Answer 2

あなたのSVGはviewBoxを持っているので、SVGは親コンテナのサイズにスケールします。 SVGの一部をスケールしない方法はありません。

パターンを同じサイズに保ちながら円のサイズを変更する場合は、SVG全体ではなく円のサイズを変更します。

svg { 
 
    width: 40%; 
 
}

<svg id="bg-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> 
 
     <defs> 
 
      <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28"> 
 
       <rect width="28" height="28" style="fill:#002a3a"></rect> 
 
       <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
      </pattern> 
 
     </defs> 
 
\t \t <circle cx="50" cy="50" r="50" style="fill:url(#a);"></circle> 
 
</svg> 
 

 

 
<svg id="bg-circle2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> 
 
     <defs> 
 
      <pattern id="a" x="0.5" y="0.5" width="1" height="1" patternUnits="userSpaceOnUse" viewBox="0 0 28 28"> 
 
       <rect width="28" height="28" style="fill:#002a3a"></rect> 
 
       <circle cx="21" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="7" cy="28" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="28" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="14" cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cy="14" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="21" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
       <circle cx="7" r="4" style="fill:#f7f7f6;opacity:0.3"></circle> 
 
      </pattern> 
 
     </defs> 
 
\t \t <circle cx="50" cy="50" r="25" style="fill:url(#a);"></circle> 
 
</svg>