javascript - 展平 SVG 中的变换属性
问题描述
我在 adobe XD 中创建了一个矢量，然后将其导出为 SVG 文件。问题是在组元素中的 SVG 文件中<g>有这样的内联变换属性集
所以当我为元素设置一个动画类来为我的 SVG 设置动画时，它的行为不符合预期。动画发生，但元素的位置可能会发生变化，因为一旦我在外部 CSS 中transform: translate通过，初始属性就会被 new 覆盖。@keyframes我该如何解决这个问题？
我在这里找到了类似的答案，但它适用于 Inkspsce，我目前只能访问 Adobe Illustrator 和 Adobe XD。另外，这个答案对我来说不是很清楚，因为我不熟悉 Inkspace。如何通过更新element 的子元素中transform: "translate "的属性来展平这些属性，同时确保 SVG 中的元素保留在它们的位置d
@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" 并且动画类在 CSS 文件中 style.css 的第 179 行，类名**.slide-in-bottom**
解决方案
在花了很多时间之后，我终于找到了一个不错的解决方案。问题在于Adob e 的应用程序和您从UNDRAW-free 开源 svg下载 SVG 的其他地方。
他们没有考虑到网页设计师希望使用带有transform: translate()属性的动画并将此属性放在您下载的 SVG 文件中，以便在您在 SVG 中分组项目后节省时间并计算新路径（例如在 Adobe XD 和 Adobe Illustrator 中） ）。以这种方式为 SVG 制作动画变成了一场噩梦。
有两种方法可以纠正它，我发现这是最简单的，并且不需要您使用像 SVGO 这样的 JS 库来完成这项工作。
1.使用 Figma
如果您使用包含 2 个编辑器、云存储、比 adobe XD 更好的界面以及其他一些好处的入门计划，则可以免费使用Figma 。你可以在这里查看免费计划
修复
您需要做的就是在Figma中打开 SVG并选择 Art-board，然后在右下角找到 export BUTTON
选择 SVG 作为导出类型
然后单击三个点并选中选项包括“id”属性 （推荐将图层/组的名称添加为 SVG 元素中的 ID）
点击导出
瞧，你完成了 为什么 Figma 比 adobe 好得多 Xd
2.使用亲和设计器
这需要您支付大约 40 美元，但它类似于 Adobe Illustrator，并且具有更多功能，因为它不仅仅用于 Web UI？UX 设计。
修复
只需打开你的 SVG -> Export -> SVG -> More -> 检查 Flatten transforms 。
推荐阅读
- sql-server - 如何对sql中的选定列进行分组？
- react-native - 整页没有滚动反应本机
- javascript - Uncaught (in promise) TypeError: t is not a function
- javascript - 如何从表单中调用 js 脚本？
- actions-on-google - 如何让我的代理重复任何名称 - Dialogflow
- javascript - 用大数据过滤列表 - VueJs
- node.js - 我试图通过 ;module.exports = mongoose.model('product',schema); 在 nodejs mongodb 中导出一个模块；
- c# - ac#统一跳转代码的一些问题
- python - Panda groupby：计算满足其他列条件的行？
- phoenix-framework - 使用 Ecto.Multi 更新父记录和动态子记录