第一个元素(最大的元素)很好,但我想把它当作尺寸的80%。
HTML:
<div class="scene">
<svg
version="1.1"
id="dc-spinner"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
width:"38"
height:"38"
viewBox="0 0 38 38"
preserveAspectRatio="xMinYMin meet"
>
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
<animate
attributeName="opacity"
values="0;1;0" dur="1.8s"
repeatCount="indefinite"/>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="1.5027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
<animateTransform
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
calcMode="spline"
keySplines="0.4, 0, 0.2, 1"
keyTimes="0;1"
dur="2s"
repeatCount="indefinite" />
</path>
<path fill="#859900" stroke="#ffffff" stroke-width="1.5027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
<animateTransform
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="1.8s"
repeatCount="indefinite" />
</path>
</svg>
</div>
答案 0 :(得分:1)
只需在第二个动画周围添加一个组,并为其进行适当的转换。
<g transform="translate(4 4) scale(0.8 0.8)">
比例0.8为您提供80%的比例,而翻译(4,4)可以调整元素中心现在移动的事实。所以我们需要调整(0.2 * 20)将它移回原来应该的位置。
html {
height: 100%;
min-height: 100%;
overflow: hidden;
}
html body {
background-size: 100%;
font: 14px/21px Monaco, sans-serif;
color: none;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
height: 100%;
min-height: 100%;
background-color: black;
}
html body a, html body a:visited {
text-decoration: none;
color: #FFffF;
}
html body h4 {
margin: 0;
color: #666;
}
.scene {
width: 100%;
height: 100%;
-webkit-perspective: 600;
perspective: 600;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.scene svg {
width: 240px;
height: 240px;
}
.splashscreenlogo{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#splashlogo{
position: absolute;
top:46%;
left:36%;
}
&#13;
<div class="scene">
<svg
version="1.1"
id="dc-spinner"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
width:"38"
height:"38"
viewBox="0 0 38 38"
preserveAspectRatio="xMinYMin meet"
>
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
<animate
attributeName="opacity"
values="0;1;0" dur="1.8s"
repeatCount="indefinite"/>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="1.5027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
<animateTransform
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
calcMode="spline"
keySplines="0.4, 0, 0.2, 1"
keyTimes="0;1"
dur="2s"
repeatCount="indefinite" />
</path>
<g transform="translate(4 4) scale(0.8 0.8)">
<path fill="#859900" stroke="#ffffff" stroke-width="1.5027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
<animateTransform
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="1.8s"
repeatCount="indefinite" />
</path>
</g>
</svg>
</div>
&#13;