CSS 네임 스페이스, SVG는 HTML에서 :이 파일은 내 사이트에서 호스팅 한 CSS

를 사용하여 SVG 파일의 상태를 강조 :CSS 네임 스페이스, SVG는 HTML에서 :이 파일은 내 사이트에서 호스팅 한 CSS

https://commons.wikimedia.org/wiki/File:Blank_US_Map.svg

당신은 SVG에서 내부를 보면, 꽤 좋은 ID는있다 주의 2 문자 약어에 해당하는 그건 ... 내가 요소, 다음 URL을 검사하고보고 가고있다

<path xmlns="http://www.w3.org/2000/svg" d="m 880.79902,142.42476 0.869,-1.0765 1.09022,-3.29102 -2.54308,-0.91347 -0.48499,-3.07156 -3.87985,-1.13162 -0.32332,-2.74824 -7.27475,-23.44082 -4.60142,-14.542988 -0.89708,-0.0051 -0.64664,1.616605 -0.64664,-0.484981 -0.96997,-0.969963 -1.45494,1.939925 -0.0485,5.032054 0.31165,5.667218 1.93992,2.74824 0,4.04152 -3.7182,5.06278 -2.58657,1.13164 0,1.13162 1.13163,1.77827 0,8.56802 -0.80831,9.21467 -0.16166,4.84982 0.96997,1.2933 -0.16166,4.52649 -0.48499,1.77828 0.96881,0.70922 16.78767,-4.42455 2.17487,-0.60245 1.84357,-2.77333 3.60523,-1.61312 z" id="NH" class="state"/>

나는 상호 작용 무엇을하려고하고 있지 않다

--- 난 그냥 계산에 따라 다르게 일부 주 색상 싶습니다 , choropleth.

빨강, 초록, 회색 및 각 주에 해당하는 그룹이있는 경우 어떻게하면이지도를 색칠하기 위해 내 CSS를 수집해야합니까? 오히려 CSS 속성보다 속성을 "채우기"나는 내가 SVG 표준을 사용하기로하고 이해

#MI, #NH, #ME, #AK { 
    fill: "#ff0000"; 
} 

#HI, #FL, #NY { 
    fill: "#00FF00"; 
} 

#CA { 
    fill: "#F1F1F1" 
}

을 :

내가 작동하지 않았다이 순수 CSS를 시도했다 "배경 색을."

여기 jsfiddle에서 CSS + javascript를 사용하는 다른 노력이 있습니다.

http://jsfiddle.net/7wRmX/2/

HTML :

<BODY> 
    <h1>First try image</h1> 
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg" alt="Map of coverage across the US."> 
<hr> 
    <h1>Second try Object</h1> 
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg"> 
    JUNK 
</object> 
<hr>  
    <h1>Third try Use</h1> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<use xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg"/> 
</svg> 
</BODY>

CSS :

.s5 { 
    fill: #00FA19; 
    color: #00FA19; 
    background-color:#00FA19; 
} 

svg #NV { 
    fill: #00FA19; 
    color: #00FA19; 
    background-color:#00FA19;  
} 

hover { 
    fill:red; 
} 

.state { 
    fill: red; 
} 

path { 
    fill: blue; 
}

JAVASCRIPT : 이러한 수정의

var element = document.getElementById("CA"); 
element.setAttribute("class", "s5");

없음이 실제로 어떤 색깔을 생산하지 않습니다.

자바 스크립트를 사용하여 CSS를 추가하는 것 외에도 여기에 몇 가지 시도해 보았습니다. 이름으로 요소를 가져 오는 것뿐입니다.

이러한 모든 실수에서 내 생각에 ID의 범위가 올바르게 지정되지 않았습니까? SVG 또는 그 안에있는 ID를 찾으라는 말을해야합니까? 또는 SVG 내의 <path> 객체입니까?

내 다른 추측으로 내가 부적절하게 호스팅하고있는 것이므로 the only way to style SVG is to use inline SVG일까요? 그렇다면 파이썬 플라스크를 사용하여 SVG를로드하는 방법을 찾고있을 것입니다.

출처

2013-08-14 Mittenchops

스크립트 here에 대한 자세한 사항은 색상 리터럴에서 따옴표를 제거있다. – Phrogz

당신이 link that CSS within the file itself에 아닌 컨테이너에서, 어느 SVG 파일에 <style> 요소를 추가하여 필요 CSS를 통해 SVG 파일의 색상을 수정하려는 경우 <?xml-stylesheet href="stylesheet.css" type="text/css"?> 라인 또는 HTML <link> 요소가 링크 외부 스타일 시트.

<object> 태그를 사용하는 경우 자바 스크립트를 사용하여 외부에서 수행 할 수 있지만 <image> 태그는 외부 수정을 할 수 없습니다.당신은 당신이

<object type="image/svg+xml" id="obj" data="..."/>

이 그래서 만약 당신이

document.getElementById("obj").contentDocument.getElementById("CA"); 
element.setAttribute("class", "s5");

하지만 S5를 사용하여 내용에 액세스 할 수있는 SVG 문서를 얻을 필요가 <object> 태그

것 여전히 CSS 클래스해야 래퍼 HTML 문서가 아닌 SVG 문서 내에서 정의됩니다.

을 예로들 수 있습니다. <object>에서 contentDocument로가는 방법을 알 수 있습니다.

출처

2013-08-14 21:15:14

CSS 네임 스페이스, SVG는 HTML에서 :이 파일은 내 사이트에서 호스팅 한 CSS

답변

관련 문제