如何从此svg删除空白

时间：2019-04-30 06:07:09

标签： css svg

该svg应该显示在较小的区域中，因此svg周围的空白会引起问题，我该如何减小它，以便仅装载程序在其中，而没有空白区域。 

<svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;">
<!--circle(cx="16",cy="50",r="10")-->
<circle cx="84" cy="50" r="0" fill="#413fa4">
 <animate attributeName="r" 
          values="10;0;0;0;0" 
          keyTimes="0;0.25;0.5;0.75;1" 
          keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
          calcMode="spline" 
          dur="2.8s" 
          repeatCount="indefinite" 
          begin="0s"></animate>
<animate attributeName="cx" 
         values="84;84;84;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
</circle>
<circle cx="46.4254" cy="50" r="10" fill="#22b75b">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-1.4s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-1.4s"></animate>
</circle>
<circle cx="16" cy="50" r="8.94865" fill="#413fa4">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-0.7s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="-0.7s"></animate>
         </circle>
<circle cx="84" cy="50" r="1.05135" fill="#22b75b">
<animate attributeName="r" 
         values="0;10;10;10;0" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
<animate attributeName="cx" 
         values="16;16;50;84;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate></circle>
<circle cx="80.4254" cy="50" r="10" fill="#413fa4">
<animate attributeName="r" 
         values="0;0;10;10;10" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1"   calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
<animate attributeName="cx" 
         values="16;16;16;50;84" 
         keyTimes="0;0.25;0.5;0.75;1" 
         keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" 
         calcMode="spline" 
         dur="2.8s" 
         repeatCount="indefinite" 
         begin="0s"></animate>
         </circle>
</svg>

1 个答案:

答案 0 :(得分：0)

将cy的值更改为10，它将删除顶部和底部的多余空间

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis" style="background: none;">
    <!--circle(cx="16",cy="10",r="10")-->
    <circle cx="84" cy="10" r="0" fill="#413fa4">
        <animate attributeName="r" values="10;0;0;0;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="84;84;84;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
    <circle cx="46.4254" cy="10" r="10" fill="#22b75b">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-1.4s"></animate>
    </circle>
    <circle cx="16" cy="10" r="8.94865" fill="#413fa4">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="-0.7s"></animate>
    </circle>
    <circle cx="84" cy="10" r="1.05135" fill="#22b75b">
        <animate attributeName="r" values="0;10;10;10;0" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="16;16;50;84;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
    <circle cx="80.4254" cy="10" r="10" fill="#413fa4">
        <animate attributeName="r" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
        <animate attributeName="cx" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" calcMode="spline" dur="2.8s" repeatCount="indefinite" begin="0s"></animate>
    </circle>
</svg>

相关问题
最新问题