SVG отображает только один элемент, фон и цвета сломаны

Рейтинг: 3Ответов: 1Опубликовано: 19.07.2025

Пытаюсь создать SVG изображение логотипа, состоящее из 3х элементов: белой крыши, оранжевой буквы М и белых листьев по краям. Всё это на темно-синем фоне с градиентом. Написал код SVG, но в итоге почему-то отображается только последний элемент (листья) и объекты заливаются не своим цветом, а фона вообще не видно.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="573.000000pt" height="448.000000pt" viewBox="0 0 573.000000 448.000000" preserveAspectRatio="xMidYMid meet" >
<defs>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="#103F6B" />
<stop offset="100%" stop-color="#0E3053" />
</linearGradient>
</defs>
<!-- Background -->
<rect fill="url(#MyGradient)" x="0" y="0" width="573" height="448"/>
<!-- White roof -->
<path transform="translate(0.000000,448.000000) scale(0.100000,-0.100000)" d="M0 2240 l0 -2240 2865 0 2865 0 0 2240 0 2240 -2865 0 -2865 0 0 -2240z m3057 1748 c71 -57 397 -317 724 -578 327 -262 664 -530 749 -597 289 -226 673 -538 684 -555 8 -13 7 -29 -4 -60 -26 -76 -38 -78 -383 -78 -227 0 -305 3 -330 13 -61 26 -62 28 -65 283 l-3 234 -26 20 c-24 19 -40 20 -283 20 l-258 0 -268 213 c-147 116 -351 280 -454 363 -233 189 -232 189 -261 174 -12 -7 -223 -173 -468 -370 -246 -196 -456 -362 -468 -369 -15 -7 -107 -11 -291 -11 -252 0 -271 -1 -294 -20 -25 -19 -25 -19 -31 -246 -5 -203 -8 -230 -25 -253 -36 -49 -47 -51 -370 -51 -325 0 -341 2 -376 52 -9 12 -16 39 -16 60 0 37 3 40 198 191 491 382 857 668 967 757 66 53 206 163 310 245 105 82 323 255 485 384 162 129 310 245 329 258 62 42 85 34 228 -79z m1492 -7 c12 -8 14 -89 12 -528 -1 -285 -4 -519 -5 -520 -1 -2 -74 57 -162 130 -89 72 -224 183 -302 246 l-142 115 0 276 c0 152 3 280 7 283 10 10 576 8 592 -2z" fill="#FFFFFF"/>
<!-- Orange letter М -->
<path transform="translate(0.000000,448.000000) scale(0.100000,-0.100000)" d="M0 2240 l0 -2240 2865 0 2865 0 0 2240 0 2240 -2865 0 -2865 0 0 -2240z m2334 172 c153 -326 541 -1122 546 -1122 3 0 76 145 162 323 86 177 227 466 313 642 l156 320 395 3 395 2 -3 -107 -3 -108 -38 -6 c-52 -8 -97 -54 -108 -110 -4 -24 -8 -367 -9 -762 0 -773 -2 -744 52 -794 13 -12 42 -26 63 -31 l40 -8 3 -102 3 -102 -426 0 -425 0 0 105 0 105 25 0 c43 0 82 27 104 73 21 43 21 53 21 650 0 334 -3 607 -6 607 -3 0 -26 -44 -51 -97 -25 -54 -163 -341 -306 -638 -143 -297 -284 -591 -313 -652 l-53 -113 -89 0 c-60 0 -93 4 -99 13 -10 11 -61 116 -375 767 -54 113 -152 314 -216 448 l-117 242 -3 -590 c-2 -568 -1 -592 17 -629 23 -44 59 -70 107 -78 l34 -6 0 -103 0 -103 -335 -3 -335 -3 0 108 0 107 29 0 c36 0 89 42 107 87 21 49 20 1488 0 1538 -17 39 -68 75 -108 75 l-28 0 0 110 0 110 398 0 397 -1 79 -167z" fill="#FB8F68"/>
<!-- White leaves on the sides of the letter M --> 
<path transform="translate(0.000000,448.000000) scale(0.100000,-0.100000)" d="M0 2240 l0 -2240 2865 0 2865 0 0 2240 0 2240 -2865 0 -2865 0 0 -2240z m514 -434 c109 -134 172 -189 340 -295 81 -51 174 -118 206 -148 145 -134 229 -331 246 -577 l7 -101 -49 42 c-63 53 -373 368 -445 453 -92 108 -201 253 -211 283 -6 15 -14 27 -18 27 -12 0 42 -139 85 -217 61 -113 171 -248 302 -371 102 -96 233 -246 233 -266 0 -3 -24 6 -52 19 -29 13 -109 40 -178 60 -169 49 -268 102 -351 186 -107 107 -168 252 -200 471 -19 131 -15 528 5 528 2 0 38 -42 80 -94z m4755 -88 c21 -186 11 -361 -30 -523 -63 -250 -208 -393 -492 -484 -54 -18 -123 -43 -154 -56 -31 -14 -58 -23 -60 -21 -7 7 118 157 232 276 162 171 264 319 315 459 33 89 32 104 -1 39 -42 -84 -218 -287 -466 -539 l-193 -196 0 61 c0 88 27 240 54 308 63 156 148 253 329 377 74 50 165 117 202 148 66 56 185 208 222 283 l17 35 7 -35 c4 -19 12 -79 18 -132z m-4301 -1074 c42 -8 104 -28 137 -43 62 -29 175 -108 175 -122 0 -18 -139 -51 -233 -56 -113 -7 -181 5 -275 48 -69 31 -172 101 -211 142 l-23 26 33 5 c105 18 310 18 397 0z m4182 -8 c0 -18 -87 -98 -147 -136 -60 -38 -177 -76 -263 -85 -72 -7 -199 12 -264 39 -47 20 -43 27 56 92 133 88 191 102 436 102 141 0 182 -2 182 -12z" fill="#FFFFFF"/>
</svg>

Вот такой логотип должен получиться в итоге.

Логотип

Ответы

▲ 3

У вас вместо форм получились инвертированные вырезы. Удалите узлы по периметру у всех путей.

введите сюда описание изображения введите сюда описание изображения