Блог

Я использую значки svg для развертывания и сворачивания компонента. Они отображаются правильно, как вы можете видеть на следующем изображении:

но когда я разворачиваю компонент и выполняю действие, svg начинают выглядеть так:

Я убедился, что в компоненте svg нет абсолютно никаких изменений, и они возвращаются к правильному виду после того, как я разверну другой компонент. Эта проблема возникает в нескольких местах, где я использую значки svg. Я использую React, и значки svg загружаются как компоненты. Это происходит только в Safari и ни в каком другом браузере

Редактировать

Код для svg :

 export const CollapseIcon = () => (<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="24"
height="24"
viewBox="0 0 24 24">
<defs>
  <path
    id="gt4gdtq39a"
    d="M7.146 9.146c.174-.173.443-.192.638-.057l.07.057L12 13.293l4.146-4.147c.174-.173.443-.192.638-.057l.07.057c.173.174.192.443.057.638l-.057.07-4.5 4.5c-.174.173-.443.192-.638.057l-.07-.057-4.5-4.5c-.195-.196-.195-.512 0-.708z"
  />
</defs>
<g fill="none" fillRule="evenodd">
  <g>
    <g transform="translate(-956 -290) translate(956 290)">
      <mask id="reyuf8n5tb" fill="#fff">
        <use xlinkHref="#gt4gdtq39a" />
      </mask>
      <use fill="#000" fillRule="nonzero" xlinkHref="#gt4gdtq39a" />
      <g fill="#F7274A" mask="url(#reyuf8n5tb)">
        <path d="M0 0H24V24H0z" />
      </g>
    </g>
  </g>
</g>
 

);

и я использую его как простой компонент, например:

       {expanded ? <CollapseIcon /> : <ExpandIcon />}