Question

我无法渲染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内容

<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>

Answer 1

打开您的SVG，即： Illustrator
选择您的形状，然后转到对象→展开。
再次保存作为SVG。

https://jsbin.com/pononul/1/edit?html,css,output

对于你可以做的CSS内容：

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">

无法渲染svg图像

1 个答案: