CSS 테두리가있는 SVG 아이콘을 하나의 요소로 만들기

Question

예 : http://jsfiddle.net/8H3Ay/2/.

안녕하세요, 저는 CSS를 통해 경계선이 추가 된 SVG 아이콘이 있습니다. 하나의 요소 (SVG 아이콘과 경계선이 아닌 별도의 요소)로 만들려고합니다. 그래서 원 안쪽이나 조금 밖에 서 있으면 SVG 아이콘 색상뿐만 아니라 테두리도 바뀝니다.

작은 화면에서도 잘 보이는 아이콘을 만들 수있는 다른 방법이 있다면 알려 주시기 바랍니다. 나는 CSS 스프라이트로하는 듯했지만 아이콘 확장 성 (내 정상 .PNG 이미지처럼, 흐리게 수) 만드는 방법을 알고하지 않습니다

HTML :

<a href="#">     
    <?xml version="1.0" encoding="utf-8"?> 
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     width="48px" height="48px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> 
    <text transform="matrix(1 0 0 1 168.7834 543.8093)"><tspan x="0" y="0" fill="#FFFF00" font-family="'Verdana-Bold'" font-size="20">simpleicon.com</tspan><tspan x="-159.59" y="24" fill="#FFFF00" font-family="'Verdana'" font-size="20">Collection Of Flat Icon, Symbols And Glyph Icons</tspan></text> 
    <g id="_x23_020201ff"> 
     <path fill="#444444" d="M223.22,71.227c16.066-15.298,38.918-20.465,60.475-21.109c22.799-0.205,45.589-0.081,68.388-0.072 
     c0.09,24.051,0.098,48.111-0.009,72.161c-14.734-0.026-29.478,0.036-44.212-0.026c-9.343-0.582-18.937,6.5-20.635,15.762 
     c-0.224,16.093-0.081,32.195-0.072,48.289c21.61,0.089,43.22-0.027,64.829,0.054c-1.582,23.281-4.47,46.456-7.858,69.541 
     c-19.088,0.179-38.187-0.018-57.274,0.099c-0.17,68.665,0.089,137.33-0.134,205.995c-28.352,0.116-56.721-0.054-85.072,0.08 
     c-0.537-68.674,0.044-137.383-0.295-206.066c-13.832-0.144-27.672,0.099-41.503-0.116c0.053-23.085,0.018-46.169,0.026-69.246 
     c13.822-0.169,27.654,0.036,41.477-0.098c0.42-22.442-0.421-44.91,0.438-67.333C203.175,101.384,209.943,83.493,223.22,71.227z"/> 
    </g> 
    </svg> 
</a> 

CSS :

#facebook{ 
    border: 4px solid #444444; 
    border-radius: 50%; 
    padding: 10px; 
} 
#facebook:hover{ 
    border:4px solid #3b5998; 
} 
#facebook path:hover{ 
    fill:#3b5998; 
} 

Answer 1

정확하게 이해했다면 hover에 전체 SVG 요소의 색상을 변경하고 싶습니다.

는 그렇다면, 당신은 다음과 같이 CSS 선택기를 변경해야

#facebook:hover { 
    border: 3px solid #3b5998; 
} 

#facebook:hover path { /* <-- change the 'path' fill color on hover */ 
    fill: #3b5998; 
} 

JSFiddle Demo