- CSS

나는 다음과 같다 내가 HTML에로드하고 SVG를 가지고이 :- CSS

실제 SVG 파일은 다음과 같습니다

<img src="assets/img/big_layout.svg" alt="Line Overview" class="line_overview">

<svg x="0" y="0" width="1466" height="825" viewBox="0 0 1466 825" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
style="display: block;margin-left: auto;margin-right: auto;"> 
<defs> 
<!-- SOME STYLES I've REMOVED --> 
</defs> 
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" /> 
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" /> 
<path fill-rule="evenodd" d="M187,21l195,0l0,195l-195,0L187,21Z" 
// LOADS MORE PATHS!!!!

나는이 svg에서 스타일의 일부를 부모 html과 바꿀 수 있기를 바란다. .g1_1 클래스에 fill: green을 추가하십시오. 이것이 가능한가?

출처

2016-10-21 George Edwards

아마도 도움이 될까요? http://stackoverflow.com/questions/10139460/modify-stroke-and-fill-of-svg-image-with-javascript#10141550 –

실제로 [해킹] (https://gist.github.com/)이 있습니다. LeaVerou/5198257)에는 [: target] (https://developer.mozilla.org/en-US/docs/Web/CSS/:target) 선택기와 svg 자체 내에 다른 CSS 규칙이 설정되어 있습니다. 그런 다음 URL의 해시 식별자를 일부 정의 된 요소 ('myFile.svg # myBlueGroup' /'myFile.svg # myRedGroup')로 변경해야합니다. 그러나 이것은 해킹 일 뿐이므로 여러분의 질문을 재개 할만한 가치가 없습니다. 속임수에 답변하지 않습니다 (cc @PaulLeBeau) – Kaiido

마크 업에서 SVG를로드 할 수있는 옵션이 경우 다음을 수행 할 수 있습니다

<html> 
... 
<svg></svg> 
... 
</html>

을 그리고 CSS를 통해 스타일을 :

svg .g1_1 { 
    fill: green; 
}

예 :

svg { 
 
    width: 64px; 
 
} 
 

 
svg polygon { 
 
    fill: red; 
 
} 
 

 
svg:hover polygon { 
 
    fill: green; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"> 
 
    <g> 
 
    <polygon fill="none" points="18,4 10,12 22,24 10,36 18,44 38,24 "></polygon> 
 
    </g> 
 
</svg>

출처

2016-10-21 23:18:05 Luke

답변

관련 문제