2016-10-08 3 views
2

svg 이미지를 렌더링 할 수 없지만 다른 이미지가 잘 렌더링됩니다.svg 이미지를 렌더링 할 수 없습니다.

아래의 코드를 참조하십시오

<img onmouseover="this.style.background ='orange',this.style.opacity ='.6'" onmouseout="this.style.opacity ='1',this.style.background =''" style="border-radius: 50%; opacity: 1;" src="/Kentico9/getmedia/8c553839-4a4d-4c26-b0d0-432f8247ae6a/twitter.svg?ext=.svg" title="Twitter"> 

내가 위의 이미지 주소를 가지고가는 경우에, 나는 파일을 다운로드 할 수 website link

이 웹 사이트에 클릭, 네 개의 아이콘은 웹 사이트에서 누락 된 참조하시기 바랍니다 :

Image link

SVG 내용

012 3,516,
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 162"> 
    <defs> 
    <style>.cls-1{fill:#ffffff;}</style> 
    </defs> 
    <title>instagram</title> 
    <path class="cls-1" d="M107.74,57.51q4.2,0,8.4,0a4.2,4.2,0,0,0,4.24-4.2q0-4.24,0-8.48a4.18,4.18,0,0,0-4.28-4.19h-8.35a4.17,4.17,0,0,0-4.23,4.23q0,4.18,0,8.35A4.19,4.19,0,0,0,107.74,57.51Z"/> 
    <path class="cls-1" d="M81.27,67.27A14.22,14.22,0,1,0,95.2,81.82,14.22,14.22,0,0,0,81.27,67.27Z"/> 
    <path class="cls-1" d="M81,0a81,81,0,1,0,81,81A81,81,0,0,0,81,0ZM33.21,48.71c0-.12.05-0.24,0.07-0.36,0.18-1.24.26-2.51,0.54-3.73a11.37,11.37,0,0,1,4-6.61,8.59,8.59,0,0,1,3.37-1.67v20H45c0-.11,0-0.22,0-0.33q0-5.31.05-10.62c0-3.3,0-6.61,0-9.91,0-.35,0-0.7,0-1a0.38,0.38,0,0,1,.16-0.29c0.81-.26,1.62-0.49,2.48-0.75l0.26,23h3.67c0-.41,0-0.81,0-1.21q0-3.95,0-7.89c0-2,0-3.92,0-5.88q0-4.34,0-8.69h2.6c0,0.1,0,.2,0,0.29q0,6.15.05,12.3,0,5.33,0,10.66c0,0.18,0,.35,0,0.56l3.71-.17V32.79l1.43-.12H99.65a2.94,2.94,0,0,0,.44.07l9,0a21.94,21.94,0,0,1,4.68.32,17.86,17.86,0,0,1,11.7,8,20.16,20.16,0,0,1,3.26,11.52c-0.07,3.19-.09,6.38-0.13,9.57,0,0.71-.05,1.41-0.08,2.15H98.47A1.13,1.13,0,0,1,97.8,64a33.43,33.43,0,0,0-5.48-3.78A23,23,0,0,0,78,57.47a27.71,27.71,0,0,0-14,6.35,1.68,1.68,0,0,1-1.22.46c-3.2-.1-6.4-0.16-9.61-0.24L41,63.76l-7.8-.18V48.71ZM99.78,81.5A18.79,18.79,0,1,1,81.13,62.69,18.78,18.78,0,0,1,99.78,81.5Zm28.43,34.44a16.76,16.76,0,0,1-4.94,9,16,16,0,0,1-11,4.35q-30.57,0-61.15,0a28.38,28.38,0,0,1-4.71-.41,14.85,14.85,0,0,1-8.49-4.4,17.27,17.27,0,0,1-4.35-9.06c-0.14-.74-0.23-1.48-0.34-2.23V67.69H60.76l-0.38.47-0.32.39a18.21,18.21,0,0,0-3.33,9A32.38,32.38,0,0,0,56.67,85a19.33,19.33,0,0,0,.6,3.72,25.09,25.09,0,0,0,3.58,7.18c4.81,6.73,11.43,10,19.62,10.28a22.59,22.59,0,0,0,5.65-.73,24,24,0,0,0,14.42-9.15A23.5,23.5,0,0,0,105.48,81a25.19,25.19,0,0,0-4.31-13,2.18,2.18,0,0,1-.12-0.26h27.74v0.6q0,21.08,0,42.16A24.67,24.67,0,0,1,128.2,115.94Z"/> 
</svg> 
+1

: u는 내 CSS를 다시 작성할 수 광기 –

+0

보다 hover'을 , 나 do not는 무엇이 있는지에 관해 안다 : 호버 – SmartestVEGA

답변

2
  1. 즉 내부에 SVG를 엽니 다 일러스트 레이터
  2. 은 도형을 선택하고 →이 확장 객체로 이동합니다.
  3. 다시을 SVG로 저장하십시오. 당신은 간단하게 할 수있는 CSS 물건에 대한 https://jsbin.com/pononul/1/edit?html,css,output

:

img.social{ 
 
    border-radius:50%; 
 
    transition: 0.3s; 
 
} 
 
img.social:hover{ 
 
    background: orange; 
 
}
<img class="social" src="http://www.weegeeg.com/insta.svg" title="Instagram">
단순히 CSS를`사용하지 왜

+0

내가 svg를 열 때 나는 아래에있다 : – SmartestVEGA

+0

@SmartestVEGA 당신은 정확하게 네가 해결할 수있을 거라고 했어. 귀하의 사이트에 가서 svg를 다운로드하여 illlustrator에서 열고 Object -> Expand로 이동하여 내 답변을 작성하고 jsBin 데모를 만들고 CSS를 개선했습니다. 정말로 여기에서 얻을 수 있기를 바랍니다! –

관련 문제