IMG 태그에 포함 된 SVG의 CSS에 연결

여러 개의 SVG 파일이 포함 된 페이지가 있습니다. SVG 파일의 스타일을 동기화하기 위해 모든 스타일 정보를 담을 단일 스타일 시트를 만들고 싶었습니다.IMG 태그에 포함 된 SVG의 CSS에 연결

그러나 아래의 SVG를 포함 시키면 CSS가 적용되지 않습니다. 누구나 이것에 대한 해결책이 있거나 아니면 <img src="..." />이 참조하는 SVG의 다른 (CSS) 파일에 링크 할 수 없습니까?

아래 예제 코드를 참조하십시오. pic.svg을 브라우저에 직접로드하면 모든 스타일이 적용되고 녹색 사각형이 표시됩니다. 그러나 열 때 page.htm 모든 볼 것이다 검은 사각형입니다. 분명히 정의 된 스타일은 적용되지 않았습니다.

에 Page.htm

<!DOCTYPE html> 
<html> 
<body> 
    <img src="pic.svg" style="width: 100px; height: 100px;" /> 
</body> 
</html>

pic.svg

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="styles.css" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

을 styles.css

rect { 
    stroke: black; 
    fill: green; 
}

EDIT

답변에서 짧은 시간 동안 여기에 나타났습니다. this link to the spec 및 다음 인용문이 있습니다. 제 의견으로는 위의 코드가 작동해야한다고 명시되어 있습니다! 'IMG', '물체'(HTML) 또는 '상'(SVG)과 함께 HTML 또는 XML 문서에 포함

독립형 SVG 문서 요소

[...]
"귀하의 링크에서 참조 된 SVG 문서 내에서 어디서나 정의 스타일 시트를 인용
전체 SVG 문서에 적용하지만, (스타일 요소 또는 스타일 속성, 또는 스타일 시트 처리 명령와 연결 외부 스타일 시트에서 에서) ~하지 마라. 참조하는 문서 (아마도 HTML 또는 XHTML)와 일치해야합니다. "

출처

2012-09-25 Sirko

개인 정보 보호를 위해 이미지는 독립 실행 형 파일이어야합니다. 스타일 시트를 데이터 URI로 인코딩하면 CSS를 사용할 수 있습니다. 예 :

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

데이터 URI에는 다양한 online converters이 있습니다.

출처

2012-09-25 15:09:37

그러나이 경우 SVG 파일 당 하나의 스타일 정의가 다시 있습니다. 그리고 그것은 내가 게시 한 spec 추출물과 어떻게 관련이 있습니까? – Sirko

스타일 정의를 공유하려는 경우 이미지 태그를 사용할 수 없습니다. 보안 문제는 일반적으로 그런 것들을 고려하지 않는 사양 요구 사항을 무시하는 경향이 있습니다. –

분명히 이것은 또한 HTML 파일을 통해로드 된 SVG 파일에서 외부 글꼴을 참조 할 수 없다는 것을 의미합니다. –

대안은 당신의 HTML에 <object> 태그를 사용하는 것입니다 : -

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

그것은 <img> 태그가 작동하지 않습니다 큰 수치이다. 나는 SVG를 데이터 URI로 변환하는 해킹에 대해 망설이지는 않는다. 간접적으로 리소스를로드하고 "Open Redirector"를 사용하는 경우 사이트 간 취약점과 관련이 있습니다.

어젯밤 테스트에서 <img> 태그 메서드는 IE10에서는 작동하지만 Chrome이나 FireFox에서는 작동하지 않습니다.

왜 <object>이 허용되고 <img>이 아닌지 나는 모른다. 감독?

출처

2013-08-23 09:24:14

감시가 없다는 것은 사람들의 일반적인 기대가 이미지의 기능에 어떤 영향을 미치는지, 즉 언제나 보는 것이 무엇인지에 대한 것입니다. object 태그는 스크립트 가능한 복합 콘텐츠를 항상 허용합니다. –

SVG에 표시 할 글꼴이 하루 종일 나를 괴롭혔습니다. 고맙습니다! ... 그러나 당신이 그것을 썼을 때, 그것은'height = "100">처럼 어떤 이유로 닫는 객체 태그가 필요한 것처럼 닫을 때까지 HTML의 나머지 부분을 깨뜨 렸습니다. http://scrabblehack.com/ –

Leon : 감사. 이에 따라 예제를 업데이트했습니다. –

IMG 태그에 포함 된 SVG의 CSS에 연결

답변

관련 문제