javascript - 更改 SVG 元素的大小

Question

我在 my JSFiddle 中显示了 2 个 SVG 元素

第一个元素(最大的一个)没问题，但我想将较小的元素设为当前大小的 80% 左右。

JSFiddle is here

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>

Answer 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%;
}

<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>