1
안녕하세요 저는 svg/js지도 (많은 작은 svg 그래픽 (도시구)로 구성되어 있습니다)에서 작업하고 있습니다. 내 메인 svg 파일을 유지 보수 할 수 있고 부 풀리지 않도록 모든 그래픽을 자체 파일에 저장합니다. 또한 모든 svgs는 동일한 CSS 파일을 공유합니다.브라우저가 서버의 외부 svg에서 참조되는 CSS를 가져 오지 못하는 이유는 무엇입니까?
이미지 태그를 사용하여 다른 파일을 참조합니다.이 파일 자체는 CSS 파일을 참조합니다.
예상 결과 : 브라우저에서 1.svg를 열고 파란색 직사각형을보십시오.
내가 는 그냥 의도로 일하지만 웹 서버에 응용 프로그램을 업로드 할 때 브라우저가 서버에서 CSS를로드하지 못했습니다 로컬 파일로지도 응용 프로그램 을 테스트 - 파이어 폭스는 스타일이 적용되지 않은 버전을 보여줍니다 svg의 오페라는 전혀 보이지 않고 여전히 요소 2/2를로드하고 있다고합니다. 내 로컬 아파치에 업로드하거나 테스트 용 드롭 박스를 사용하면 문제가되지 않습니다. 1.svg :이<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<image xlink:href="another.svg"/>
</svg>
another.svg :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">
<svg id="rectangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<rect class="blue" width="50" height="50" />
</svg>
있는 style.css
.blue { fill: blue; }
당신은 그것을 테스트하는 http://dl.dropbox.com/u/40969346/stackoverflow/reference/1.svg을 사용할 수 있습니다
그래서 여기 SVGs 있습니다 당신 자신.
DTD를 보지 않았지만 W3C의 예제에는 doctype 선언 전에 스타일 시트 참조가 있습니다. http://www.w3.org/TR/SVG/styling.html 너의 주위를 바꾸고 무슨 일이 일어나는가? –
나는 그것을 실제로했다. – taffer
이상한! BTW http://dl.dropbox.com/u/40969346/stackoverflow/reference/another.svg는 파란색으로 표시됩니다. another.svg에서 변경하여 두 번째 svg 파일의 외부 스타일을로드하고 적용하는지 확인하십시오. 다른 파일을 추가하면 브라우저가 첫 번째 svg 파일에 이미로드 된 파일이 아닌 다른 파일 인 것처럼 작동합니다. – Wayne