SVG의 칠에 사선 패턴을 대면 IE에서 이상하게 되었다

사선 텍스처를 칠에 적용한 SVG를 외부 파일로 사용했는데 IE에서 더러워 보인다는 현상을 만났기 때문에 향후를 위한 메모.

결론부터 말하면, viewBox에 소수점이 들어가지 않도록 하는 것으로 해결.

샘플

이런 녀석.
지금이라면 칠(텍스처)도 포함해 SVG로 갈 수 있으므로 편리하게 된 것입니다.

소스 코드

ht tp // 코데펜. 이오/에 s네 tk6/펜/QK조파

상기 URL의 SVG는 HTML에 직접 쓰고 있고, 이것이라고 IE, Edge에서 확인해도 특히 문제없이 깨끗하게 표시되었다.
아무래도 외부 파일로서 읽어들일 때에 더러워지는 것 같다・・・.

Chrome 및 Firefox에서 보는 방법

img 요소로 그대로 표시했을 경우도, CSS의 background-image 로 표시시킨 경우도 문제 없음.

IE11에서 보는 방법

img는 의도 한대로 표시되지 않습니다.

Edge에서 보는 방법

Edge에 이르러서는, 둘 다 이상하다.

요약

처음에 쓴대로, viewBox에 소수점을 넣지 않도록 세로를 163.4 → 164로 해 보면 올바르게 표시되었다.

이러한 사선 패턴은 디자이너도 자주 사용하므로, 개인적으로 viewBox의 소수점은 항상 지우는 버릇을 붙여 두고 싶다.