Question

出于某种原因，滑滑滑块中的svg箭头不会在线显示。在我的桌面上正常工作，然后当我上传到ftp时，它没有。提供了svg文件，我甚至重新保存并替换它，但无济于事。有什么想法吗？

html脚本：

<!-- SLIPPRY SLIDESHOW SCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="slippry/dist/slippry.min.js"></script>
<link rel="stylesheet" href="slippry/dist/slippry.css">
<link rel="stylesheet" href="style.css">

slippry / dist /＆gt; css脚本：

slippry / dist / assets /＆gt; svg文件

  .sy-controls li a:after {
  content: "";
  background-image: url(assets/arrows.svg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  text-indent: 0;
  line-height: 2.8em;
  color: #111;
  font-weight: 800;
  position: absolute;
  background-color: #fff;
  width: 2.8em;
  height: 2.8em;
  left: 50%;
  top: 50%;
  margin-top: -1.4em;
  margin-left: -1.4em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

Answer 1

您的arrows.svg文件的内容类型/ MIME类型错误。如果你看看＆＃34; Net＆＃34;浏览器开发工具的选项卡，您将看到它被提供为＆＃34; text / html＆＃34;。它应该是＆＃34; image / svg + xml＆＃34;。您需要配置Web服务器，以便它以正确的类型提供SVG文件。如何执行此操作取决于您使用的Web服务器。

Answer 2

另一种解决方法是将arrows.svg文件保存为具有透明度的PNG文件（我使用的是Illustrator），并将所有出现的'arrows.svg'替换为Slippry CSS文件中的'arrows.png'。

Slippry滑块svg箭头没有显示

2 个答案: