在 SVG 中展平变换属性

Question

我在 adobe XD 中创建了一个矢量，然后将其导出为 SVG 文件。问题是在组元素 <g> 的 SVG 文件中有内联变换属性设置如下

所以，当我为元素设置动画 class 来为我的 SVG 设置动画时，它不会按预期运行。动画发生但元素的定位可能发生变化，因为一旦我通过外部 CSS 中的 @keyframes 传递，初始 transform: translate 属性就会被新的覆盖。我该如何解决这个问题？

我找到了类似的答案 here 但它是针对 Inkspce 的，我目前只能访问 Adobe Illustrator 和 Adobe XD。另外这个答案对我来说不是很清楚，因为我不熟悉 Inkspace。我如何通过更新元素

的子元素中的 d 属性来展平这些 transform: "translate " 属性，同时确保 SVG 中的元素保留在它们的位置

在应用任何 @keyframe 动画之前，我的 SVG 看起来像这样

但是一旦我将动画属性添加到 SVG 元素（使用交集观察器）让我说我的代码我正在应用到 id House 的元素，它只是从原来的转移SVG 文件中提到的原始变换属性的位置被我自己的翻译覆盖：我在 CSS

的@keframe 动画中设置的变换属性

所以在动画之后，SVG 看起来像这样：

我使用了 animista

自动生成的动画

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-x: hidden;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
body {
  -ms-overflow-style: none;
}


#section2 {
  position: relative;
  background-color: #333;
  height: auto;
  width: 100%;
  overflow-y: hidden;
}

/*second frame animation*/
/*second frame animation*/
/*second frame animation*/
/*second frame animation*/
/*second frame animation*/
/*making opacity of everything 0 before animation begains*/


#House {
  opacity: 0;
}



/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/
/*ANIMATION ON HOUSE IS DEFINED HERE GENERRATED DFROM ANIMISTA*/


/*THIS CLKASS BELOW IS ADDED TO ELEMENT WITH ID "House" in html*/

.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-6-27 14:35:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
/*# sourceMappingURL=style.css.map */










  /*CSS DEFINING CLIP PATH AND FILL FOR SVG NOT RELEVANT FOR THIS QUESTION*/
/*CSS DEFINING CLIP PATH AND FILL FOR SVG NOT RELEVANT FOR THIS QUESTION*/
/*CSS DEFINING CLIP PATH AND FILL FOR SVG NOT RELEVANT FOR THIS QUESTION*/


 .cls-1 {
            clip-path: url(#clip-winter_3);
          }
    
          .cls-2 {
            stroke: #707070;
            fill: url(#linear-gradient);
          }
    
          .cls-20, .cls-3 {
            opacity: 0.85;
          }
    
          .cls-3 {
            mix-blend-mode: darken;
            isolation: isolate;
          }
    
          .cls-4 {
            fill: #176d81;
          }
    
          .cls-33, .cls-5, .cls-6, .cls-7, .cls-8 {
            fill: none;
          }
    
          .cls-5, .cls-6, .cls-7, .cls-8 {
            stroke: #fff;
          }
    
          .cls-5 {
            stroke-linecap: round;
          }
    
          .cls-5, .cls-6 {
            stroke-width: 3px;
          }
    
          .cls-7 {
            stroke-width: 2px;
          }
    
          .cls-9 {
            fill: #0d3446;
          }
    
          .cls-10 {
            fill: #71adb5;
          }
    
          .cls-11 {
            fill: #2f2e41;
          }
    
          .cls-12 {
            fill: url(#pattern);
          }
    
          .cls-13 {
            fill: #b6d4d8;
          }
    
          .cls-14 {
            fill: #bcd5d8;
          }
    
          .cls-15, .cls-20, .cls-24 {
            fill: #3f3d56;
          }
    
          .cls-16 {
            fill: #d0cde1;
          }
    
          .cls-17 {
            fill: #ff6584;
          }
    
          .cls-18 {
            fill: #6c63ff;
          }
    
          .cls-19 {
            fill: #575a89;
          }
    
          .cls-21 {
            fill: #e2e2e2;
          }
    
          .cls-22 {
            fill: rgba(49,153,177,0.74);
            opacity: 0.57;
          }
    
          .cls-23 {
            fill: #fff;
          }
    
          .cls-24 {
            opacity: 0.95;
          }
    
          .cls-25, .cls-29 {
            fill: #3b9fb7;
          }
    
          .cls-26 {
            fill: #4eb2c9;
          }
    
          .cls-27 {
            fill: #e6e6e6;
          }
    
          .cls-28 {
            fill: #9f616a;
          }
    
          .cls-29 {
            opacity: 0.1;
          }
    
          .cls-30 {
            fill: #c2848d;
          }
    
          .cls-31 {
            fill: #c1828b;
          }
    
          .cls-32 {
            stroke: none;
          }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Winter</title>
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <script src="/js/script.js"></script>
</head>
<body>
  
  <section id="section2">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1366 723">
      <defs>
        <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
          <stop offset="0" stop-color="#6bb2d0"/>
          <stop offset="1" stop-color="#c7eafd"/>
        </linearGradient>
        <pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1367 471">
          
        <clipPath id="clip-winter_3">
          <rect width="1366" height="723"/>
        </clipPath>
      </defs>
      <g id="winter_3" data-name="winter – 3" class="cls-1">
        <rect class="cls-23" width="1366" height="723"/>
        <g id="SkyBackground" class="cls-2">
          <rect class="cls-32" width="1366" height="768"/>
          <rect class="cls-33" x="0.5" y="0.5" width="1365" height="767"/>
        </g>
        
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        <!--PROBLEM PART HERE (HOUSE IN SVG) -->
        
        <g id="House" class="slide-in-bottom" transform="translate(-15 382.031)">
          <rect id="Rectangle_90" data-name="Rectangle 90" class="cls-15" width="16.152" height="55.91" transform="translate(590.714 197.305)"/>
          <path id="Path_906" data-name="Path 906" class="cls-20" d="M780.5,342.294l-40.205-48.333H662.021l-47.834,46.591.967.621h-.345v96.91H780.053v-96.91Z" transform="translate(-162.627 -97.277)"/>
          <path id="Path_907" data-name="Path 907" class="cls-21" d="M956.606,462.961c0,.07-.005.14-.005.211a46.994,46.994,0,0,0,3.424,7.857,19.58,19.58,0,0,0-1,6.283c0,7.363,3.8,13.331,8.484,13.331s8.484-5.969,8.484-13.331a20.178,20.178,0,0,0-.553-4.736,9.688,9.688,0,0,0,1.043-11.8,9.694,9.694,0,1,0,12.564-14.766,9.7,9.7,0,1,0-13.054-9.1c0,.142,0,.283.011.423a9.7,9.7,0,0,0-12.424,7.808,9.7,9.7,0,1,0-6.973,17.817Z" transform="translate(-369.01 -283.968)"/>
          <path id="Path_908" data-name="Path 908" class="cls-22" d="M767.751,293.125l-49.077,57.537v87.207h88.213V339.716Z" transform="translate(-189.461 -97.063)"/>
          <rect id="Rectangle_91" data-name="Rectangle 91" class="cls-15" width="18.015" height="15.924" transform="translate(564.622 292.58)"/>
          <rect id="Rectangle_92" data-name="Rectangle 92" class="cls-15" width="18.015" height="15.671" transform="translate(564.622 265.017)"/>
          <rect id="Rectangle_93" data-name="Rectangle 93" class="cls-23" width="18.015" height="15.924" transform="translate(564.622 292.58)"/>
          <rect id="Rectangle_94" data-name="Rectangle 94" class="cls-23" width="18.015" height="15.671" transform="translate(564.622 265.017)"/>
          <path id="Path_909" data-name="Path 909" class="cls-15" d="M385.357,225.672,314.1,140.816H174.018L88.41,224.2l1.729,1.112h-.618v173.44H385.26V225.313Z" transform="translate(-27.597 -57.947)"/>
          <path id="Path_910" data-name="Path 910" class="cls-15" d="M528.416,212.954l9.616-7.691c-7.47-.824-10.539,3.25-11.8,6.474-5.836-2.423-12.189.753-12.189.753l19.239,6.984A14.559,14.559,0,0,0,528.416,212.954Z" transform="translate(-257.325 -226.938)"/>
          <path id="Path_911" data-name="Path 911" class="cls-15" d="M760.573,240.5l9.616-7.691c-7.47-.824-10.539,3.25-11.8,6.474-5.836-2.423-12.189.753-12.189.753l19.239,6.984a14.558,14.558,0,0,0-4.87-6.521Z" transform="translate(-316.947 -234.013)"/>
          <path id="Path_912" data-name="Path 912" class="cls-15" d="M705.086,319.327l9.615-7.69c-7.47-.824-10.539,3.25-11.8,6.474-5.836-2.423-12.189.753-12.189.753l19.239,6.984a14.557,14.557,0,0,0-4.87-6.521Z" transform="translate(-302.697 -254.257)"/>
          <rect id="Rectangle_95" data-name="Rectangle 95" class="cls-15" width="16.152" height="55.91" transform="translate(298.74 74.924)"/>
          <rect id="Rectangle_96" data-name="Rectangle 96" class="cls-15" width="16.152" height="55.91" transform="translate(462.121 141.395)"/>
          <rect id="Rectangle_97" data-name="Rectangle 97" class="cls-15" width="16.152" height="55.91" transform="translate(462.121 135.804)"/>
          <path id="Path_913" data-name="Path 913" class="cls-24" d="M603.7,285.367l-55.133-65.482H440.391l-66.105,64.388,1.335.858h-.476V419.059H603.508V285.132Z" transform="translate(-101.016 -78.253)"/>
          <path id="Path_914" data-name="Path 914" class="cls-25" d="M586.506,218.73l-67.822,79.514V418.763H640.592V283.118Z" transform="translate(-138.1 -77.957)"/>
          <path id="Path_915" data-name="Path 915" class="cls-26" d="M363.242,139.32,275.41,242.293V398.369H433.285V222.7Z" transform="translate(-75.622 -57.562)"/>
          <path id="Path_916" data-name="Path 916" class="cls-27" d="M341.806,686.723s.386-8.093,8.3-7.152" transform="translate(-213.09 -348.758)"/>
          <circle id="Ellipse_326" data-name="Ellipse 326" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(122.516 322.339)"/>
          <rect id="Rectangle_98" data-name="Rectangle 98" class="cls-27" width="1.119" height="7.83" transform="translate(125.835 332.974)"/>
          <path id="Path_917" data-name="Path 917" class="cls-27" d="M389.452,686.723s.386-8.093,8.3-7.152" transform="translate(-225.326 -348.758)"/>
          <circle id="Ellipse_327" data-name="Ellipse 327" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(157.926 322.339)"/>
          <rect id="Rectangle_99" data-name="Rectangle 99" class="cls-27" width="1.119" height="7.83" transform="translate(161.244 332.974)"/>
          <path id="Path_918" data-name="Path 918" class="cls-27" d="M662.789,686.723s.386-8.093,8.3-7.152" transform="translate(-295.525 -348.758)"/>
          <circle id="Ellipse_328" data-name="Ellipse 328" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(361.065 322.339)"/>
          <rect id="Rectangle_100" data-name="Rectangle 100" class="cls-27" width="1.119" height="7.83" transform="translate(364.383 332.974)"/>
          <path id="Path_919" data-name="Path 919" class="cls-27" d="M864.24,686.723s.386-8.093,8.3-7.152" transform="translate(-347.261 -348.758)"/>
          <circle id="Ellipse_329" data-name="Ellipse 329" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(510.78 322.339)"/>
          <rect id="Rectangle_101" data-name="Rectangle 101" class="cls-27" width="1.119" height="7.83" transform="translate(514.097 332.974)"/>
          <path id="Path_920" data-name="Path 920" class="cls-27" d="M276.606,686.723s.386-8.093,8.3-7.152" transform="translate(-196.345 -348.758)"/>
          <circle id="Ellipse_330" data-name="Ellipse 330" class="cls-18" cx="3.963" cy="3.963" r="3.963" transform="translate(74.061 322.339)"/>
          <rect id="Rectangle_102" data-name="Rectangle 102" class="cls-27" width="1.119" height="7.83" transform="translate(77.379 332.974)"/>
          <path id="Path_921" data-name="Path 921" class="cls-21" d="M782.806,371.854c0,.081-.006.161-.006.242a53.834,53.834,0,0,0,3.923,9,22.425,22.425,0,0,0-1.146,7.2c0,8.435,4.351,15.272,9.719,15.272s9.719-6.838,9.719-15.272a23.111,23.111,0,0,0-.633-5.425,11.1,11.1,0,0,0,1.2-13.517,11.105,11.105,0,1,0,14.393-16.916,11.108,11.108,0,1,0-14.955-10.422c0,.163.005.324.012.485a11.114,11.114,0,0,0-14.233,8.945,11.107,11.107,0,1,0-7.988,20.41Z" transform="translate(-324.087 -259.233)"/>
          <path id="Path_922" data-name="Path 922" class="cls-21" d="M158.8,234.316l-13.907,19.242L143.546,215.4l-1.663,56.344-12.816-17.732,12.7,21.626-4.206,142.475H150.69l-5.651-160.365Z" transform="translate(-38.038 -77.1)"/>
          <path id="Path_923" data-name="Path 923" class="cls-15" d="M71.612,155.57,53.39,180.781l-1.762-50L49.448,204.6,32.657,181.371,49.3,209.706,43.787,396.379h17.2l-7.4-210.112Z" transform="translate(-13.278 -55.369)"/>
          <path id="Path_926" data-name="Path 926" class="cls-21" d="M558.681,277.421c0,.095-.007.189-.007.284a13,13,0,0,0,3.953,9.347,13.01,13.01,0,0,0,.652,1.218,26.325,26.325,0,0,0-1.345,8.448c0,9.9,5.107,17.926,11.408,17.926s11.408-8.026,11.408-17.926A27.141,27.141,0,0,0,584,290.35a13.027,13.027,0,0,0,1.4-15.866A13.035,13.035,0,1,0,602.3,254.628,13.038,13.038,0,1,0,584.748,242.4c0,.191.006.38.014.569a13.046,13.046,0,0,0-16.706,10.5,13.037,13.037,0,1,0-9.376,23.957Z" transform="translate(-266.135 -233.154)"/>
          <rect id="Rectangle_103" data-name="Rectangle 103" class="cls-15" width="32.242" height="32.967" transform="translate(220.085 205.167)"/>
          <rect id="Rectangle_104" data-name="Rectangle 104" class="cls-15" width="32.242" height="32.968" transform="translate(220.085 250.025)"/>
          <rect id="Rectangle_105" data-name="Rectangle 105" class="cls-23" width="32.242" height="32.967" transform="translate(220.085 205.167)"/>
          <rect id="Rectangle_106" data-name="Rectangle 106" class="cls-23" width="32.242" height="32.968" transform="translate(220.085 250.025)"/>
          <rect id="Rectangle_107" data-name="Rectangle 107" class="cls-15" width="32.242" height="32.967" transform="translate(264.676 205.167)"/>
          <rect id="Rectangle_108" data-name="Rectangle 108" class="cls-15" width="32.242" height="32.968" transform="translate(264.676 250.025)"/>
          <rect id="Rectangle_109" data-name="Rectangle 109" class="cls-23" width="32.242" height="32.967" transform="translate(264.676 205.167)"/>
          <rect id="Rectangle_110" data-name="Rectangle 110" class="cls-23" width="32.242" height="32.968" transform="translate(264.676 250.025)"/>
          <rect id="Rectangle_111" data-name="Rectangle 111" class="cls-15" width="32.242" height="32.967" transform="translate(309.266 205.167)"/>
          <rect id="Rectangle_112" data-name="Rectangle 112" class="cls-15" width="32.242" height="32.968" transform="translate(309.266 250.025)"/>
          <rect id="Rectangle_113" data-name="Rectangle 113" class="cls-23" width="32.242" height="32.967" transform="translate(309.266 205.167)"/>
          <rect id="Rectangle_114" data-name="Rectangle 114" class="cls-23" width="32.242" height="32.968" transform="translate(309.266 250.025)"/>
          <rect id="Rectangle_115" data-name="Rectangle 115" class="cls-15" width="24.897" height="24.102" transform="translate(412.334 272.061)"/>
          <rect id="Rectangle_116" data-name="Rectangle 116" class="cls-15" width="24.897" height="24.102" transform="translate(412.334 236.068)"/>
          <rect id="Rectangle_117" data-name="Rectangle 117" class="cls-23" width="24.897" height="24.102" transform="translate(412.334 272.061)"/>
          <rect id="Rectangle_118" data-name="Rectangle 118" class="cls-23" width="24.897" height="24.102" transform="translate(412.334 236.068)"/>
          <rect id="Rectangle_119" data-name="Rectangle 119" class="cls-15" width="24.897" height="24.102" transform="translate(448.75 272.061)"/>
          <rect id="Rectangle_120" data-name="Rectangle 120" class="cls-15" width="24.897" height="24.102" transform="translate(448.75 236.068)"/>
          <rect id="Rectangle_121" data-name="Rectangle 121" class="cls-23" width="24.897" height="24.102" transform="translate(448.75 272.061)"/>
          <rect id="Rectangle_122" data-name="Rectangle 122" class="cls-23" width="24.897" height="24.102" transform="translate(448.75 236.068)"/>
        </g>
       

      </g>
    </svg>
    
    
    
    
    
  </section>
  
</body>
</html>

问题导致 SVG 中的项目有一个 id="House" 并且动画 class 在 CSS 文件中 style.css 的第 179 行，名称为 class **.slide-in-bottom**

Answer 1

我花了很多时间终于找到了解决问题的好方法。问题出在 Adobe and other placed where you download the SVG from like UNDRAW - free open source svg.

的应用程序上

他们没有考虑到网页设计师会希望使用 transform: translate() 属性的动画并将此属性放在您下载的 SVG 文件中以节省时间和在 SVG 中对项目进行分组后计算新路径（例如在 Adobe XD 和 Adobe Illustrator 中）。以这种方式制作 SVG 动画成为一场噩梦。

我发现有两种更正方法是最简单的，并且不需要您使用像 SVGO 这样的 JS 库来完成这项工作。

1。使用 Figma

Figma is free to use if you use starter plan which includes 2 editors, cloud storage, good interface better than adobe XD, and several other perks. you can check free plan here

修复

您需要做的就是在 Figma 和 select 画板中打开您的 SVG，然后在右下角找到导出按钮
Select 导出类型为 SVG
然后点击三个点并勾选选项Inclide "id" attribute （在推荐的 SVG 元素中添加层/组的名称作为 ID）
点击导出

DOWNLOAD FIGMA

瞧你完成了 Why Figma is far better than adobe Xd

2。 Use Affinity designer

这需要您支付大约 40 美元，但它与 Adobe Illustrator 类似并且具有更多功能，因为它不仅仅用于 Web UI?UX 设计。

修复

只需打开您的 SVG -> 导出 -> SVG -> 更多 -> 检查 Flatten 变换。

在 SVG 中展平变换属性

Flatten the transform property in SVG

html

javascript

css

svg

adobe-xd

1。使用 Figma

2。 Use Affinity designer

在 SVG 中展平变换 属性

Flatten the transform property in SVG

html

javascript

css

svg

adobe-xd

1。 使用 Figma

2。 Use Affinity designer

在 SVG 中展平变换属性

1。使用 Figma