2017-12-15 4 views
0

다음 SVG 있습니다. 크기는 표시되는 위치에 따라 다릅니다.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>

답변

-2

는 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>

0

귀하의 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>

관련 문제