问题[svg]

她的所作所为，是不可能平衡规模的。宽度和高度都是36，按我的理解，比例应该是1

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 36000000 36000000" width="36" height="36"><circle fill="#273b7a" cx="18000000" cy="18000000" r="18000000"/><path fill="#4285f4" d="M18392187 16345311v3450000h5395311a6059374.6 6059374.6 0 0 1-11843749-1796875 6057812 6057812 0 0 1 6056250-6056249c1562500 0 2984375 598437 4057812 1570312l2531250-2709375a9759374.4 9759374.4 0 1 0 3024999 5542187z"/><path fill="#ea4335" d="M17999999 11942187c1562500 0 2984375 598437 4057812 1570312l2531250-2709375a9756249.3 9756249.3 0 0 0-15210936.6 2625000l2978124.6 2385937a6054687.1 6054687.1 0 0 1 5643750-3871874z"/><path fill="#fbbc05" d="M11942187 17999999c0-771875 150000-1507813 414062-2187500l-2978124.6-2382812a9714061.7 9714061.7 0 0 0-1137500 4571874c0 1659375 415624.9 3221874 1146874.9 4590625l2960937.7-2426562a6031249.6 6031249.6 0 0 1-406250-2164063z"/><path fill="#34a853" d="M21367186 23031248a6023437.1 6023437.1 0 0 1-3367187 1026563 6054687.1 6054687.1 0 0 1-5651562-3893750l-2960937.7 2426562A9756249.3 9756249.3 0 0 0 24342186 25412498Z"/><path fill="#4285f4" d="M27759374 17999999c0-564063-53126-1117187-145314-1654688h-9223437v3450000h5395312a6068749.5 6068749.5 0 0 1-2420312 3234375l2974999 2384374a9734374.2 9734374.2 0 0 0 3417189-7414061z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 198 350" width="350px" height="198px" style="background: #ab9c9c;">
  <circle xmlns="http://www.w3.org/2000/svg" cx="77" cy="80.5" fill="none" stroke="#ff0000" stroke-width="25" r="120" stroke-dasharray="270">
     <animateTransform keyTimes="0;1" values="0 77 80.5;360 77 80.5" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"/>
  </circle>
</svg>

就是没法让它在中心，我通过浏览器改变参数，动画歪了，这样那样。但通过 Inkscape，动画消失了......

描述

我正在尝试创建一个我的图标。用这样的代码...

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

...结果是这样的：

现在，为了去除切出的圆形部分中的线条，我在它们上使用与大圆圈相同的蒙版。如果我在对角线
上使用蒙版，那么一切都会正常：

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

如果我在非对角线上使用遮罩，它们会完全消失：

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

据我了解，我正确配置了掩码......

问题

为什么会发生这种情况？
如何修复它？

有svg一个组包装器，旨在一次性将样式应用于内部组的所有 5 个元素。然而，径向梯度基本上不会应用于整个组，而是单独应用于 5 个组中的每一个。怎样才能一次性应用到所有人身上呢？我究竟做错了什么？

<svg width="800" height="100" viewBox="0 0 800 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="filter0_i_406_6193" x="0.0524902" y="0" height="41.5858" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" width="100%">
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"></feColorMatrix>
      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_406_6193"></feBlend>
    </filter>
    <radialGradient id="paint0_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(152 21.0001) rotate(-180) scale(154 1129.33)">
      <stop stop-color="#738898" stop-opacity="0"></stop>
      <stop offset="1" stop-color="#738898"></stop>
    </radialGradient>
    <radialGradient id="paint1_radial_406_6193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(152) rotate(90) scale(42 520.249)">
      <stop stop-color="#9B8474"></stop>
      <stop offset="1" stop-color="#D5AF71" stop-opacity="0"></stop>
    </radialGradient>
  </defs>

  <g filter="url(#filter0_i_406_6193)" fill-opacity="0.65" fill="url(#paint0_radial_406_6193)">
    <!-- Левый блок с углами -->
    <g transform="translate(0, 0)">
      <path d="M14.9626 2.94761C16.8395 1.06082 19.391 0 22.0523 0H40V40H22.0523C19.391 40 16.8395 38.9392 14.9626 37.0524L1.50763 23.5262C-0.432568 21.5757 -0.432566 18.4243 1.50763 16.4738L14.9626 2.94761Z"></path>
    </g>
    <!-- Ровный участок между левым блоком и центром -->
    <g transform="translate(40, 0)">
      <rect height="40" width="216"></rect>
    </g>
    <!-- Центральный блок -->
    <g transform="translate(256, 0)">
      <path d="M 0 0 H 8 V 40 H 6.4142 C 6.149 40 5.8946 40.1054 5.7071 40.2929 L 4.7071 41.2929 C 4.3166 41.6834 3.6834 41.6834 3.2929 41.2929 L 2.2929 40.2929 C 2.1054 40.1054 1.851 40 1.5858 40 H 0"></path>
    </g>
    <!-- Ровный участок между центром и правым блоком -->
    <g transform="translate(264, 0)">
      <rect height="40" width="216"></rect>
    </g>
    <!-- Правый блок с углами -->
    <g transform="translate(480, 0)">
      <path d="M0 0H17.948C20.609 0 23.1605 1.06082 25.0374 2.94761L38.4924 16.4738C40.4326 18.4243 40.4326 21.5757 38.4924 23.5262L25.0374 37.0524C23.1605 38.9392 20.609 40 17.948 40H0V0Z"></path>
    </g>
  </g>
</svg>

有两个 svg。在顶部，请查看代码，使用该类，line我可以毫无问题地绘制一条线，将值stroke-dashoffset从 0 更改为 600，反之亦然。但那里的线是实心的，没有空格。

但在第二个svg中，线断了，y的值为stroke-dasharray71.7214,41.8375，stroke-dashoffset无论你放多少，都不会影响线的移动。

如何实现绘制虚线的效果，就像第一个svg中绘制实线一样？

https://codepen.io/sergeykomyza/pen/mdvqXgE?editors=1100

<svg class="line" viewBox="0 0 205 236" fill="none"><path class="route-animation" d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" stroke="black" stroke-width="2"></path></svg>

<svg class="line2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 6250 4200" style="enable-background:new 0 0 6250 4200;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#F26166;stroke-width:6;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#F26166;}
</style>
<g>
    <g>
        <path class="st0" d="M89.8,4091.1c4-9.3,8.8-20.4,14.3-33.1"/>
        <path class="st1" stroke-width="6" d="M120.6,4019.7c97.3-224.9,333.4-754.8,580.3-1031.4c310.3-347.7,471.1-118.8,727.9-238    c315.2-146.2,415.3-518.1,625.8-754.8c196.9-221.5,468.9-348.4,865.1,12.3c258.8,235.6,463.7,459.9,805.9,426.6    c291.6-28.4,485.3-362.3,612.3-748.5c119.2-362.5,148.6-735.9,447-854.4c308.1-122.2,442.9,238.6,787.4,179.9    c216.1-36.8,289-316.5,388.9-524.3c64.1-133.2,136.3-265.5,175-334.8"/>
        <path class="st0" d="M6146.4,134.1c11.2-20,17.7-31.3,17.7-31.3"/>
    </g>
</g>
</svg>

.line{
  width: 300px;
  display: block;
  margin-bottom: 100px;
}
.line path{
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
}

.line2{
  width: 600px;
}
.line2 .st1{
  stroke-dasharray:71.7214,41.8375;
}