我怎樣才能使svg響應

Question

您好我是新手使用svg，同時看一個教程autor創建一個svg文件具有以下屬性，使其resposive和它適用於他，問題是當我試圖做同樣的事情，形狀變得越來越大，而且根本無法抵抗。請幫忙謝謝

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100%" height="100%" viewBox="0 0 400 400"> 

<style type="text/css"> 
.st0{fill:#231F20;} 
.circle{ 
fill:#27AAE1; 

} 

</style> 
<g id="container" class="colors"> 
<circle class="st0" cx="200" cy="200" r="197.5"/> 
</g> 
<g id="dots" class="colors"> 
<path class="circle" id="c1" d="M146.98,363.54L146.98,363.54L146.98,363.54c-9.2-2.98-14.23- 12.851-11.25-22.05l0,0 
    c2.97-9.19,12.84-14.23,22.04-11.25l0,0c9.19,2.979,14.23,12.85,11.25,22.04l0,0c-2.4,7.409-9.26,12.109-16.64,12.109l0,0 
    C150.59,364.39,148.77,364.12,146.98,363.54z"/> 
<path class="circle" id="c2" d="M231.13,352.25c-2.99-9.19,2.04-19.061,11.229-22.05l0,0c9.19-2.99,19.07,2.04,22.061,11.229l0,0 
    c2.979,9.19-2.04,19.061-11.23,22.05l0,0c-1.8,0.59-3.63,0.86-5.42,0.86l0,0C240.39,364.34,233.53,359.64,231.13,352.25z"/> 
<path class="circle" id="c3" d="M61.03,301.16L61.03,301.16L61.03,301.16c-5.69-7.811-3.98-18.761,3.83-24.45l0,0 
    c7.81-5.7,18.76-3.98,24.45,3.83l0,0c5.7,7.81,3.98,18.75-3.83,24.45l0,0c-3.11,2.27-6.72,3.359-10.29,3.359l0,0 
    C69.79,308.35,64.46,305.85,61.03,301.16z"/> 
<path class="circle" id="c4" d="M314.63,304.87c-7.82-5.69-9.55-16.63-3.86-24.45l0,0c5.681-7.82,16.63-9.54,24.45-3.86l0,0 
    c7.811,5.69,9.54,16.63,3.85,24.45l0,0l0,0l0,0c-3.42,4.71-8.76,7.21-14.159,7.21l0,0C321.34,308.22,317.729,307.13,314.63,304.87z 
    "/> 
<path class="circle" id="c5" d="M28.13,200.18c-0.01-9.66,7.81-17.5,17.48-17.51l0,0c9.66-0.01,17.51,7.81,17.52,17.48l0,0 
    c0,9.66-7.82,17.5-17.49,17.52l0,0c0,0-0.01,0-0.02,0l0,0C35.97,217.67,28.13,209.84,28.13,200.18z"/> 
<path class="circle" id="c6" d="M336.88,200c0-0.02,0-0.03,0-0.05l0,0c-0.01-0.08-0.01-0.16-0.01-0.24l0,0c-0.021-9.67,7.8-17.52,17.47-17.54 
    l0,0c9.66-0.02,17.51,7.8,17.53,17.46l0,0c0,0.07,0,0.14,0,0.21l0,0c0,0.05,0,0.11,0,0.16l0,0c0,0,0,0,0.01,0l0,0 
    c0,9.66-7.84,17.5-17.5,17.5l0,0C344.71,217.5,336.88,209.66,336.88,200z"/> 
<path class="circle" id="c7" d="M64.7,123.58c-7.82-5.68-9.56-16.62-3.88-24.44l0,0c5.68-7.83,16.62-9.56,24.44-3.89l0,0 
    c7.82,5.68,9.56,16.63,3.88,24.45l0,0c-3.42,4.71-8.76,7.22-14.17,7.22l0,0C71.4,126.92,67.81,125.83,64.7,123.58z"/> 
<path class="circle" id="c8" d="M310.6,119.34L310.6,119.34c-5.7-7.8-4-18.75,3.8-24.45l0,0c7.811-5.7,18.761-4,24.46,3.8l0,0 
    c5.7,7.81,4,18.76-3.81,24.46l0,0c-3.11,2.27-6.72,3.37-10.31,3.37l0,0C319.35,126.52,314.03,124.03,310.6,119.34z"/> 
<path class="circle" id="c9" d="M135.43,58.64c-3-9.19,2.02-19.07,11.21-22.07l0,0c9.19-3,19.07,2.02,22.06,11.21l0,0 
    c3,9.19-2.01,19.07-11.2,22.07l0,0c-1.8,0.59-3.63,0.87-5.43,0.87l0,0C144.7,70.72,137.84,66.02,135.43,58.64z"/> 
<path class="circle" id="c10" d="M242.09,69.71c-9.2-2.97-14.25-12.83-11.28-22.03l0,0c2.971-9.19,12.84-14.24,22.03-11.27l0,0 
    c9.2,2.97,14.25,12.83,11.28,22.03l0,0c-2.391,7.41-9.261,12.13-16.65,12.12l0,0C245.689,70.56,243.88,70.29,242.09,69.71z"/> 
</g> 
</svg> 

Answer 1

有了SVG，就有點怪異：

1. 你應該做的第一件事是包裹SVG標籤在父DIV標籤。

   <div id="parent_element"> 
   
       <svg id="your_svg" viewBox="0 0 400 400"></svg> 
   
   </div> 
   

2. 屬性preserveAspectRatio="xMinyMin meet"添加到SVG

   <div id="parent_element"> 
   
       <svg id="your_svg" preserveAspectRatio="xMinyMin meet" viewBox="0 0 400 400"></svg> 
   
   </div> 
   

3. 望着CSS，你需要設置相對絕對定位的父元素的子元素：

   /*Parent container*/ 
   
   div { 
       display: inline-block; 
       overflow: hidden; 
       padding-bottom: 100%; 
       position: relative; 
       vertical-align: middle; 
   } 
   
   
   /*SVG child*/ 
   
   svg { 
       display: inline-block; 
       left: 0; 
       position: absolute; 
       top: 0; 
   } 
   

4. 根據需要進行調整。注意填充底部的黑客。它基於SVG ViewBox的高度/寬度。有關更多信息，請查看本Codrops Article，您可以在​​