나는 인라인 SVG가 병렬로 다운로드 할 수있는 HTML과 동안 정말 고통,하지만 같은 일을 편집 할 CSS를를 사용할 수 있기 때문에, <img src="some.svg">을 가지고있다 할 싶습니다 무엇 fill:#fff.
추신 : 웹 페이지는 nodeJS 서버에 있으며 페이지 자체는 기본적으로 정적입니다. (Ajax를 통해 수정 됨)<img src="*.svg">는 CSS 편집을위한 SVG 인라인
HTML 파일이나 스타일 시트에서 CSS 코드를 사용하여 별도의 svg 파일에있는 요소에 적용 (예 : 채우기 또는 획 색상 설정)한다고 가정합니다.
HTML 태그 (스크립트 태그 또는 링크 된 스타일 시트)의 CSS 규칙이 이미지 태그를 통해 포함 된 경우 svg 요소에 영향을 미치지 않는 것 같습니다. svg 파일에서 기술적으로 (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes) 할 수있는 외부 스타일 시트를 사용할 수 있다고 생각했지만 크롬과 Firefox에서 모두 시도했지만 혼합 된 결과가 나타납니다. 특히, 브라우저에 .svg 파일을로드하면 외부 스타일 시트가 작동하지만 (예 : url 막대에 .svg 파일 경로를 넣음) img 태그를 통해 포함 시키면 외부 스타일 시트가 아무런 영향을 미치지 않습니다 . 그게 버그, 기능 또는 내가 어딘가에서 잘못한 것이 었는지 나는 모른다.
어쩌면 내가 놓친 것일 수도 있지만 내 시도에 기초하여 svg가 포함되어있는 경우 svg 외부에서 CSS를 사용할 수 있습니다. 어쩌면 당신은 svg 요소를 html snippets 같은 것으로 포함 시키려고 할 수 있습니까?
답변 주셔서 감사합니다. 그러나 문제가 해결되지는 않습니다. 'parent : hover'등으로 항목을 사용하고 싶습니다. – Akxe
Google에서 'Html5 Imports'를 검색하고 그 길 아래에 솔루션이 있는지 확인할 수 있습니다. – OldGeeksGuide
img 요소는로드하는 미디어에 선언 된 다른 외부 리소스를로드 할 수 없습니다 (외부 '
어떤 질문을 참조하지 마십시오
은 분명히 그것은 기능입니다. 'img' 태그 안에 SVG 이미지를 사용할 수 있습니다. –
하지만 나중에 CSS로 스타일을 지정할 수는 없습니다. – Akxe