Question

我的网站上有很多SVG图片选择

http://www.poipleshadow.com

它们看起来很清晰，我很乐意继续使用它们，虽然我有一个问题，当我将它们与IE的后备相结合时，它们有链接。

例如，这很好

<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>

但是当我将svg添加为对象并包含一行PNG支持时，该链接不再起作用。

<a href="Goa-India-Map.htm" title="Goa Tourist Map">
<object type="image/svg+xml" data="Images/Buy-Items-To-Donate.svg" class="myimgleft">
<img src="Images/Buy-Items-To-Donate.png" width="200" height="156" alt="Give to charity - Donate to Street Children Charity"  class="myimgleft">
</object>
</a>

我已经搜索并发现我可以在SVG中包含该链接，但这意味着SVG只会链接到单个地址。不理想。任何人都知道一个干净，基本的解决方案，因为我喜欢尽可能地保持我的网站基本使用HTML5和CSS。

Answer 1

这很黑，但我过去曾使用a trick from CSS Tricks。

不幸的是，在该页面上没有方便的锚点链接，但它看起来像这样：

.my-element {
  background-image: url(fallback.png);
  background-image: url(image.svg), none;
}

显然支持多个背景和SVG大多重叠，所以任何不支持svg的东西都会使用顶级背景图像，而任何支持svg的东西都会使用底部。聪明，但就像我说的那样，hacky，以及我所知道的最好的技巧，它不会使用Modernizr。

CSS Tricks报告＆＃34;这在IE 6-8中运行良好，但遗憾的是不支持Android 2.3，它支持多种背景但不支持SVG，＆＃34;如此警告。

回复下面的评论：

您的SVG现在看起来像这样：

<a href="index.htm">
  <img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>

在样式表中，您可以添加到.logo200类：

.logo200 {
  background-image: url(Images/Poiple-Shadow.png); // make a png or jpg version of the image
  background-image: url(Images/Poiple-Shadow.svg), none;
  width: 32px;                                     //give it width and height
  height: 32px; 
}

现在，请使用div：

，而不是使用<img>标记

<a href="index.htm">
  <div class="logo200"></div>
</a>

如果SVG支持多个背景（因此也支持svgs），浏览器应显示SVG。如果浏览器不支持SVG，它可能不支持多个背景，因此它只显示第一个background-image属性。

没有Javascript的SVG链接和PNG后备

1 个答案: