该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>
答案 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>