svg gradient

Baek Dong Hyun·2023년 5월 7일
1

이번에 그라데이션이 들어가는 svg를 적용중이였는데 아니이게 코드가 잘못된건 분명히 아닌데 일반 단색 svg는 적용이 되었지만 이상하게도 그라데이션이 들어간 svg는 적용이 안됐다. 그래서 열심히 구글링하고 찾던중 발견해서 작성하려고한다.

일단 나의 경우는 예를 들어 abcdefg 라고 알파벳이 적인 이미지라고 했을 때 abcd는 단색이고 efg는 그라데이션이 적용된 이미지였다.

우선 사용한 라이브러리는

flutter_svg: ^1.1.6

이것이고 코드는

SvgPicture.asset(
  '경로',
)

이렇게 작성했었다. 근데 결과는 abcd까지는 보이는데 efg는 안보이는 상황이였다.
그 결과 해결방법은 일단 한가지만 발견했다. 근데 내 경우가 딱 맞는 경우여서 다른 경우라면 해결방법을 더 찾아봐야 할 것같다. 일단 이렇게 해결했다.
svg파일을 열어 코드를 보는데
코드가 만약

<svg>
	...
	<defs>
		...
	</defs>
</svg>

이렇게 defs태그가 밑에 있다면 svg 열리는 태그 바로 밑으로 옮기면 잘 출력된다.

<svg>
	<defs>
		...
	</defs>
  ...
</svg>

이렇게 하면 된다.

profile
안녕하세요.

0개의 댓글