2017-01-12 102 views
0

我想這對準SVG,水平之內它的容器(在這種情況下,它可以是任何DIV,身體,或什麼的。)如何將響應SVG圖像居中?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> 
 
      <g fill="none" fill-rule="evenodd" transform=""> 
 
       <ellipse cx="442.5" cy="5.5" fill="#172A3A" rx="5.5" ry="5.5"></ellipse> 
 
       <path stroke="#172A3A" d="M806.88 69.082v-4.68c0-12.692-10.29-22.98-22.982-22.98h-316.59c-9.558 0-18.64.828-24.868-6.422-6.228 7.25-15.31 6.42-24.87 6.42H100.983C88.29 41.42 78 51.71 78 64.403v4.68M442.5 11v55.5"></path> 
 
       <ellipse cx="78.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse> 
 
       <ellipse cx="443.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse> 
 
       <ellipse cx="78.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse> 
 
       <ellipse cx="443.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse> 
 
       <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
 
        <tspan x="69.177" y="117">72</tspan> 
 
       </text> 
 
       <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
 
        <tspan x="27.471" y="183">Investments</tspan> 
 
       </text> 
 
       <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
 
        <tspan x="433.39" y="117">30</tspan> 
 
       </text> 
 
       <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
 
        <tspan x="350.356" y="183">Succesful Trade Sales</tspan> 
 
       </text> 
 
       <ellipse cx="807.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse> 
 
       <ellipse cx="807.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse> 
 
       <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold"> 
 
        <tspan x="800.749" y="117">13</tspan> 
 
       </text> 
 
       <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold"> 
 
        <tspan x="793.588" y="182.003">IPOs</tspan> 
 
       </text> 
 
      </g> 
 
     </svg>

+0

就像這樣https://jsfiddle.net/dtjz225o/?請注意,您的圖形目前不在視口中居中。這可能會混淆「中心化」的看法。 – Sirko

回答

0
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 868 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> 
     <g fill="none" fill-rule="evenodd" transform=""> 
      <ellipse cx="442.5" cy="5.5" fill="#172A3A" rx="5.5" ry="5.5"></ellipse> 
      <path stroke="#172A3A" d="M806.88 69.082v-4.68c0-12.692-10.29-22.98-22.982-22.98h-316.59c-9.558 0-18.64.828-24.868-6.422-6.228 7.25-15.31 6.42-24.87 6.42H100.983C88.29 41.42 78 51.71 78 64.403v4.68M442.5 11v55.5"></path> 
      <ellipse cx="78.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse> 
      <ellipse cx="443.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse> 
      <ellipse cx="78.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse> 
      <ellipse cx="443.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse> 
      <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
       <tspan x="69.177" y="117">72</tspan> 
      </text> 
      <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
       <tspan x="27.471" y="183">Investments</tspan> 
      </text> 
      <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
       <tspan x="433.39" y="117">30</tspan> 
      </text> 
      <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2"> 
       <tspan x="350.356" y="183">Succesful Trade Sales</tspan> 
      </text> 
      <ellipse cx="807.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse> 
      <ellipse cx="807.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse> 
      <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold"> 
       <tspan x="800.749" y="117">13</tspan> 
      </text> 
      <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold"> 
       <tspan x="793.588" y="182.003">IPOs</tspan> 
      </text> 
     </g> 
    </svg> 


    <style> 
    svg { 
    display: block; 
    margin: 0 auto; 
    max-width: 1320px; 
    } 
    </style> 
+0

你可以放棄嗎? – Arun

1

同樣的問題here

SVG默認爲內聯。將display: block添加到它,然後margin: auto將按預期工作。