@Avenant
Frontend-разработчик

Как отобразить svg?

Тут очень странная ситуация, проект на реакте, вообщем именно эта картинка не хочет отображаться ни через тег img, ни через use.
<symbol id="logo" viewBox="0 0 148 119">
        <g>
          <g filter="url(#filter0_d)">
            <path d="M119.52 68.4731C121.491 54.3584 119.047 40.8746 116.366 31.4122C116.208 30.9391 116.129 30.5448 115.971 30.0717C114.473 31.8065 112.817 33.3047 111.082 34.724C110.452 35.1971 109.821 35.7491 109.19 36.2222C108.401 36.7742 107.692 37.3262 106.903 37.8781C103.355 40.3226 99.6488 42.5305 96.1792 45.0538C92.6308 36.9319 87.9785 29.2832 83.5627 21.5556C80.0932 15.5627 76.7814 9.49104 74.1004 3.1828C73.9427 2.78853 73.785 2.39427 73.6272 2C70.8674 8.78136 67.319 15.2473 63.6129 21.5556C59.1971 29.2832 54.5448 36.9319 50.9964 45.0538C47.5269 42.5305 43.8208 40.3226 40.2724 37.8781C39.4839 37.3262 38.6953 36.7742 37.9857 36.2222C35.5412 34.4086 33.1756 32.3584 31.1255 30.0717C28.2867 39.5341 25.5269 53.6487 27.5771 68.3943C16.6953 67.2903 9.2043 65.1613 4 62.7169C6.05018 73.1255 12.1219 91.8136 29.1541 103.011C29.1541 103.011 29.233 103.011 29.233 103.09C30.4946 103.878 31.8351 104.667 33.1756 105.455C33.7276 105.771 34.2796 106.007 34.8315 106.323C40.6667 109.24 47.6057 111.29 55.8064 112.079C48.0788 105.534 42.7168 98.3584 39.0896 90.9462C36.5663 85.8208 34.9104 80.6165 33.8853 75.4122C37.9857 75.8853 41.6918 76.7527 45.1613 78.0143C45.5556 80.4588 46.1075 82.9032 46.9749 85.3477C49.7348 93.3118 55.3333 100.251 62.509 104.746C65.1111 106.401 67.9498 107.663 70.8674 108.609C71.4194 102.695 69.9212 95.5197 65.8996 88.8172C64.8746 87.1613 63.6918 85.5054 62.3513 83.9283C60.7742 77.3047 61.405 70.129 64.3226 63.8996C66.6093 59.0896 70.552 52.6237 73.1541 48.0502C73.3118 47.8136 73.4695 47.4982 73.6272 47.2617C73.785 47.4982 73.9427 47.8136 74.0215 48.0502C76.7025 52.7025 80.6452 59.0896 82.8531 63.8996C85.7706 70.129 86.4014 77.3047 84.8244 83.9283C78.1219 91.7348 75.6774 101.118 76.3082 108.452C76.3082 108.452 76.3082 108.452 76.3082 108.53C76.3082 108.609 76.3082 108.609 76.3082 108.609C79.2258 107.663 82.0645 106.401 84.6667 104.746C85.7706 104.036 86.7957 103.326 87.8208 102.538C93.4982 98.1219 97.8351 92.129 100.201 85.3477C101.068 82.9821 101.62 80.5376 102.014 78.0143C105.484 76.7527 109.19 75.8853 113.29 75.4122C110.767 88.0287 104.459 100.961 91.3692 112C99.5699 111.211 106.509 109.161 112.344 106.244C112.896 106.007 113.448 105.692 114 105.376C133.004 95.2043 140.179 76.1219 142.781 64.6093C142.939 63.9785 143.097 63.3477 143.176 62.7169C137.814 65.1613 130.323 67.2903 119.52 68.4731ZM35.5412 92.129C39.1685 98.4373 44.2151 104.43 50.9964 109.95C45.9498 108.846 41.4552 107.19 37.5914 105.061C22.8459 97.1756 15.9857 83.4552 12.7527 73.1255C17.2473 74.1505 22.3728 74.8602 28.129 74.9391C28.2867 74.9391 28.5233 74.9391 28.681 74.9391C30.1004 80.7742 32.2294 86.5305 35.5412 92.129ZM48.1577 51.914C46.5806 56.4875 45.3979 61.2186 44.9247 66.0287C44.8459 67.1326 44.767 68.1577 44.6882 69.2617C44.6882 70.129 44.6093 70.9964 44.6093 71.9427C41.1398 70.681 37.1971 69.6559 32.8602 69.104C32.7025 67.448 32.5448 65.7921 32.5448 64.2151C32.2294 55.6989 33.3333 47.7348 34.8315 41.1111C36.4875 42.1362 38.1434 43.1613 39.8781 44.0287C43.0323 45.6846 46.2652 47.2617 49.2617 49.0753C48.8674 49.9427 48.552 50.8889 48.1577 51.914ZM65.5054 93.785C67.9498 97.7276 69.2115 101.828 69.2903 105.771C69.2903 105.928 69.2903 106.086 69.2903 106.244C68.1075 105.613 66.9247 104.824 65.8208 104.036C59.0394 99.147 53.9928 91.9713 51.6272 84.0072C51.3118 82.9032 51.0753 81.7993 50.8387 80.6954C54.3082 82.509 57.3047 84.638 59.828 87.0036C62.1147 89.0538 64.0072 91.4194 65.5054 93.785ZM59.9857 65.9498C59.6702 67.0538 59.4337 68.2366 59.276 69.3405C59.276 69.4982 59.1971 69.5771 59.1971 69.7348C58.6452 73.5197 58.6452 77.3835 59.5125 81.0108C59.276 80.8531 59.1183 80.6165 58.8817 80.4588C56.4373 78.1721 53.5197 76.1219 50.129 74.3871C50.129 73.5986 50.0502 72.81 50.0502 71.9427C50.0502 70.9964 50.0502 69.9713 50.129 69.0251C50.129 68.8674 50.129 68.6308 50.129 68.4731C50.3656 64.6882 51.0753 60.9032 52.0215 57.1971C52.4946 55.4624 52.9677 53.7276 53.5197 52.0717C54.3082 52.7025 55.1756 53.4122 55.8853 54.1219C58.0932 56.2509 59.9068 58.6953 61.2473 61.3764C60.9319 62.8746 60.4588 64.3728 59.9857 65.9498ZM78.7527 46.4731C77.0179 42.9247 75.362 39.2975 74.1004 35.5125C73.8638 34.8817 73.7061 34.3298 73.5484 33.6989C72.2079 38.1147 70.3154 42.2939 68.2652 46.3943C66.3728 50.2581 64.4014 54.1219 62.7455 58.0645C61.1685 54.595 58.6452 51.4409 55.8064 48.9176C55.5699 48.681 55.3333 48.4445 55.0968 48.2867C56.1219 45.5269 57.2258 42.8459 58.4086 40.1649C59.5914 37.405 60.853 34.724 62.1147 31.9642C65.2688 25.2617 69.7634 17.2186 73.5484 8.62366C76.1505 14.6165 79.1469 20.3728 81.828 25.5771C82.9319 27.8638 84.0358 29.9928 84.9821 32.043C86.2437 34.724 87.5054 37.4839 88.6882 40.2437C89.871 42.9247 90.9749 45.6057 92 48.3656C91.7634 48.6022 91.5269 48.8387 91.2903 48.9964C88.4516 51.5986 85.9283 54.6738 84.3513 58.1434C82.6953 54.2007 80.6452 50.3369 78.7527 46.4731ZM85.6129 61.2975C86.9534 58.6165 88.767 56.172 90.9749 54.043C91.7634 53.3333 92.552 52.6237 93.3405 51.9928C93.8925 53.7276 94.4444 55.3835 94.8387 57.1183C95.8638 60.9821 96.5735 64.9247 96.81 68.9462C96.8889 70.7599 96.9677 72.4946 96.8889 74.3083C96.8889 74.3083 96.8889 74.3083 96.81 74.3083C93.4193 76.043 90.5806 78.0932 88.0574 80.3799C87.8208 80.5376 87.6631 80.7742 87.4265 80.9319C88.6093 76.043 88.215 70.8387 86.9534 65.9498C86.638 64.3728 86.1649 62.8746 85.6129 61.2975ZM77.7276 105.771C77.8853 96.7814 84.5878 86.6882 96.1792 80.6165C95.9427 81.7204 95.7061 82.8244 95.3907 83.9283C93.6559 90 90.2652 95.5986 85.8495 100.014C84.4301 101.434 82.8531 102.774 81.276 103.957C80.172 104.746 78.9893 105.455 77.8064 106.165C77.7276 106.007 77.7276 105.849 77.7276 105.771ZM102.409 71.9427C102.487 65.1613 101.068 58.3011 98.8602 51.914C98.5448 50.9677 98.1505 49.9427 97.7563 48.9964C100.832 47.1828 104.065 45.6057 107.14 43.9498C108.875 43.0824 110.53 42.0574 112.186 41.0323C112.423 41.9785 112.581 42.9247 112.817 43.871C114 49.8638 114.789 56.8029 114.473 64.1362C114.394 65.7133 114.315 67.3692 114.158 69.0251C109.821 69.6559 105.878 70.681 102.409 71.9427ZM109.427 105.14C105.563 107.19 101.068 108.925 96.0215 110.029C108.875 99.6201 115.419 87.319 118.337 75.0968C118.495 75.0968 118.731 75.0968 118.889 75.0968C124.724 75.0179 129.849 74.3083 134.265 73.2832C131.111 83.5341 124.172 97.2545 109.427 105.14Z" fill="url(#paint0_linear)"/>
          </g>
          <defs>
            <filter id="filter0_d" x="0" y="0" width="147.176" height="118.079" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
              <feFlood floodOpacity="0" result="BackgroundImageFix"/>
              <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"/>
              <feOffset dy="2"/>
              <feGaussianBlur stdDeviation="2"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
            </filter>
            <linearGradient id="paint0_linear" x1="73.5878" y1="2" x2="73.5878" y2="112.079" gradientUnits="userSpaceOnUse">
              <stop stopColor="#7ADBAE"/>
              <stop offset="1" stopColor="#1A7F72"/>
            </linearGradient>
          </defs>
        </g>
      </symbol>

Затем я через use вставляю в другой компонент:
<svg>
        <use xlinkHref="#logo"></use>
</svg>

И оно не отображается, оно на сайте присутствует, но невидимо
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
@cheeroque
Что-то не так с фильтром, если его убрать, то контур отображается нормально.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы