如何从此动画SVG中删除多余的空间(填充)? [英] How to remove extra space (padding) from this animated SVG?

问题描述

这是一个纺纱机图标，我被困在零件上，以除去纺纱机图标周围的多余填充物.

it's a spinnder icon, I am stuck at the part to remove the extra padding around the spinner icon.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="36px" height="36px" viewBox="0 0 100 100"
  preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(30 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(60 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(90 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(120 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(150 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(180 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(210 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(240 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(270 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(300 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(330 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g>

推荐答案

您需要将viewBox属性更改为viewBox="17 17 66 66"，我如何知道viewBox的新值?

You need to change the viewBox attribute to viewBox="17 17 66 66" How do I know the new value for the viewBox?

我已将所有内容包装在#G组中的SVG元素中.

I've wrapped everything inside the SVG element in a group #G.

在JavaScript中，我使用getBBox()方法获取组的边界框，并使用边界框的属性来定义SVG元素viewBox的新值.

In the JavaScript I'm getting the bounding box of the group using the getBBox() method and I'm using the properties of the bounding box to define the new value of the viewBox of the SVG element.

vievBox = "x y width height"

console.log(G.getBBox())

svg{border:solid}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="36px" height="36px" viewBox="17 17 66 66"
  preserveAspectRatio="xMidYMid">
  <g id="G">
<g transform="rotate(0 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(30 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(60 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(90 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(120 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(150 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(180 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(210 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(240 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(270 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(300 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g><g transform="rotate(330 50 50)" style="animation-play-state: running; animation-delay: 0s;">
  <rect x="47.5" y="17" rx="2.34" ry="2.34" width="5" height="18" fill="#606366" style="animation-play-state: running; animation-delay: 0s;">
    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite" style="animation-play-state: running; animation-delay: 0s;"></animate>
  </rect>
</g>
</g>
</svg>

这篇关于如何从此动画SVG中删除多余的空间(填充)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！