如何在旋转时将两个SVG合并为一个

Question

我一直在尝试制作一个Google Fonts主题切换的副本，我想将其实现到我的网站中。

我如何使它们之间的过渡具有动画效果。这可能需要稍微调整一下，我只能设法旋转它们。我试着弄清楚如何做到这一点，但我不知道下一步该怎么做才能合并它们。

​

<meta name="color-scheme" content="dark light">
<style type="text/css">
.container {
    display: flex;
    height: 500px;
    align-items: center;
    justify-content: space-evenly;
}

svg {
    height: 200px;
    width: 200px;
    transition: 600ms ease-in-out;
}

svg:hover {
    transform: rotate(360deg);
}
</style>
<div class="container">
    <svg viewBox="0 0 24 24">
        <defs>
            <clipPath id="__lottie_element_144">
                <rect width="24" height="24" x="0" y="0"></rect>
            </clipPath>
        </defs>
        <g clip-path="url(#__lottie_element_144)">
            <g transform="matrix(1.5,0,0,1.5,7.000000476837158,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(69,90,100)" fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path>
                </g>
            </g>
            <g transform="matrix(-1,0,0,-1,12,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="rgb(69,90,100)" fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path>
                </g>
            </g>
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="xMidYMid meet">
        <defs>
            <clipPath id="__lottie_element_2">
                <rect width="24" height="24" x="0" y="0"></rect>
            </clipPath>
        </defs>
        <g clip-path="url(#__lottie_element_2)">
            <g transform="matrix(1,0,0,1,12,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="#9AA0A6" fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path>
                </g>
            </g>
            <g transform="matrix(1,0,0,1,12,12)" opacity="1" style="display: block;">
                <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                    <path fill="#9AA0A6" fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path>
                </g>
            </g>
        </g>
    </svg></div>

​

Answer 1

使用rect和circle等基本形状可以更简单地实现这一点。而且，您可以只旋转/平移SVG中的元素，而不是旋转SVG。

​

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <style>
  #u1 {
    transition: 600ms ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
  }
  #c1 {
    transition: 600ms ease-in-out;
  }
  svg:hover #u1 {
    transform: rotate(360deg);
  }
  svg:hover #c1 {
    transform: translate(-3px,0);
  }
  </style>
  <mask id="m1">
    <rect fill="white" x="0" y="0" width="100%" height="100%"/>
    <circle fill="black" r="7" cx="12" cy="12" />
  </mask>
  <symbol id="s1" mask="url(#m1)">
    <rect id="r1" fill="#9AA0A6" width="16" height="16" x="4" y="4"/>
    <use href="#r1" transform="rotate(45 12 12)"/>
  </symbol>
  <use id="u1" href="#s1" />
  <circle id="c1" fill="#9AA0A6" r="5" cx="12" cy="12" />
  </svg>

​

在这里，我将SVG文档/元素嵌入到HTML文档中。WHen该SVG被点击SVG的类名和主体元素将被设置为“暗”。这将更改背景颜色，并在SVG中的元素上运行过渡。

​

document.addEventListener('DOMContentLoaded', e => {
  document.querySelector('svg').addEventListener('click', e => {
    let svgElm = e.target.closest('svg');
    svgElm.classList.toggle('dark');
    document.body.classList.toggle('dark');
  });
});

body.dark {
  background-color: #444;
}

body svg {
  cursor: pointer;
}

<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <style>
  #u1 {
    transition: 600ms ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
    fill: #000;
  }
  #c1 {
    transition: 600ms ease-in-out;
    fill: #000;
  }
  #c2 {
    fill: #bbb;
  }
  svg.dark #u1 {
    transform: rotate(360deg);
    fill: #fff;
  }
  svg.dark #c1 {
    transform: translate(3px,0);
    fill: #fff;
  }
  svg.dark #c2 {
    fill: #666;
  }
  </style>
  <circle id="c2" r="12" cx="12" cy="12" />
  <mask id="m1">
    <rect fill="white" x="0" y="0" width="100%" height="100%"/>
    <circle fill="black" r="7" cx="12" cy="12" />
  </mask>
  <symbol id="s1" mask="url(#m1)">
    <rect id="r1" width="16" height="16" x="4" y="4"/>
    <use href="#r1" transform="rotate(45 12 12)"/>
  </symbol>
  <use id="u1" href="#s1" />
  <circle id="c1" r="5" cx="9" cy="12" />
  </svg>
</body>

​