html - 如何使 <a> 内具有悬停效果的 SVG 图像可点击

Question

假设我们有一个 anchor ，其中包含一个带有悬停效果的 SVG 图标和一些文本。

假设该图标在指向不同 URL 的各种链接中多次使用。

• SVG 应该放在一个单独的文件中而不是内联
• 链接不应嵌入到 SVG 文件中
• 悬停效果应该有效
• JS 和 noscript 回退到 PNG 是公平的游戏

嵌入 SVG 的方法

对象:

<a href="http://tomasreichmann.cz/" >
    <object data="http://svgtest.tomasreichmann.cz/images/grafika.svg" type="image/svg+xml">
    </object>
    Link
</a>

图片

<a href="http://tomasreichmann.cz/" >
    <img src="http://svgtest.tomasreichmann.cz/images/grafika.svg" alt="" />
    Link
</a>

演示 http://jsfiddle.net/YZkj9/

这真的不可能实现吗？ 这是没有人使用 SVG 的原因吗，即使它自 IE9 以来就受到支持？

感谢你们的时间和努力，你们太棒了!

Answer 1

SVG 实际上可以使用 javascript 进行操作。问题是，当尝试使用 jQuery 选择时，SVG 对象会出现很多错误，因此您至少必须使用常规 javascript 来进行选择。

假设(就像我的情况一样)您将对象包装在一个 div 和一个 href 标签中；它看起来像这样:

<div id="mp3-link">
  <a href="http://your-url.com">
    <object type="image/svg+xml" class="mp3-svg" id="object-svg" data="your-svg-url.com"></object>
  </a>
</div>

对象标签将吐出的代码看起来像这样(在我的例子中，是一个 MP3 下载链接)。

<div id="mp3-link">
<a href="http://google.com">
<object type="image/svg+xml" class="mp3-svg" id="object-svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
    <defs>
    <style type="text/css"><![CDATA[
        .fill-blue {
            fill:inherit;
            stroke-width:0;
        }
        .mp3 {
            font-family:'Lato-Bold'; 
            stroke-width:0;
        }
        .stroke-blue {
            fill-opacity:0;
            stroke:inherit;
            stroke-width:inherit;
            stroke-miterlimit:inherit;
        }
        #hover-me:hover {
            stroke:#3c4147;
            fill:#3c4147;
        }
        #hover-me {
            stroke:#227AA5;
            stroke-width:22;
            stroke-miterlimit:10;
            fill:#227AA5;
        }
    ]]></style>
</defs>
<g id="hover-me">
<text transform="matrix(0.7813 0 0 1 216.4761 524.5479)" class="mp3 fill-blue hover-me" style="font-size:193.4593;">MP3</text>
<path class="stroke-blue hover-me" d="M377.1,560.5v79 c0,6.2-5,11.2-11.2,11.2H30.6c-6.2,0-11.2-5-11.2-11.2V153.1c0-6.2,5-11.2,11.2-11.2h235.2c6.2,0,111.3,121.2,111.3,121.2v80.7  M593.7,535.4V373.5c0-11-9-20-20-20H189.2c-11,0-20,9-20,20v161.8c0,11,9,20,20,20h384.6C584.7,555.4,593.7,546.4,593.7,535.4z"/>
<path class="page-flap fill-blue hover-me" d="M272,164.5l46.3,50.4l46.7,52.6v2.4h-93V164.5 M267,131h-18v145.1c0,9.4,7.7,17,17.2,17H388v-34.2   l-52.6-59.3l-53.9-58.7L267,131L267,131z"/>
</g>
</svg>

</object>
</a>
</div>

我们需要做的是选择 svg 的内部元素(在本例中为“#hover-me”)并为其附加一个 javascript 函数:

//this is important, as the svg tends to load a little later than the rest of the elements
window.onload=function() {

    // Get the Object by ID
    var theObject = document.getElementById("object-svg");
    // Get the SVG document inside the Object tag
    var svgDoc = theObject.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("hover-me");

    //our javascript selector
    svgItem.addEventListener('click', function() { 
    //here, I'm using jQuery to select the parent and get the href. This is so you can see that jQuery is possible, just not for the selection portion of the code
    var svgHref = $(theObject).parent().attr("href");
    //now, we navigate to the external href. I chose to open in new window.
    var win = window.open(svgHref, '_blank');
    win.focus();
  });
}; //window.onload

现在，我们已经创建了一个函数，它将使用 javascript 找到包装对象的链接，然后它将使用 jQuery 将用户导航到该链接。

我尝试附加一个 jsfiddle，但 jsfiddle 不允许您导入对象，因此您必须在实际网页上尝试此代码

More info in selecting SVG elements with javascript

编辑

在进一步研究之后，我想出了一个更优化的方法来做到这一点:

通过使用 javascript 实际更改悬停的样式，我们可以让 svg 图像像普通链接一样运行(右键单击选项、下 Angular 的状态窗口等)

所以在这种情况下使用相同的 svg 标记并向我们的链接添加一个类

<div id="mp3-link">
  //we'll call our link "a-svg"
  <a href="http://your-url.com" class="a-svg">
<object type="image/svg+xml" class="mp3-svg" id="object-svg" data="your-svg-url.com"></object>
  </a>
</div>

当链接悬停时，我们可以使用此代码更改 svg 的样式:

window.onload=function() {
//get our link
var theA = document.getElementsByClassName("a-svg");
//loop through all of these (jQuery does this by default, but we're forced to use regular javascript
for(var i=0;i<theA.length;i++){
    //when the user hovers over the link...
    theA[i].addEventListener('mouseover', function() { 
    var thisObject = this.getElementsByClassName('mp3-svg')[0];
    var svgDoc = thisObject.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("hover-me");
    //change the attributes of the svg
    svgItem.setAttribute("fill", "#3c4147");
    svgItem.setAttribute("stroke", "#3c4147");
});
//now revert the changes when the mouse leaves
theA[i].addEventListener('mouseleave', function() { 
    var thisObject = this.getElementsByClassName('mp3-svg')[0];
    var svgDoc = thisObject.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("hover-me");
    svgItem.setAttribute("fill", "#227aa5");
    svgItem.setAttribute("stroke", "#227aa5");
});
}   
};

最后，我们需要一些 css 来使链接位于 svg 之上

.a-svg:after {
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:absolute;
  content"";
}
#mp3-link {
  position:relative;
  height:140px;
  width:140px;
}

现在，我们的 svg 图像有了一个具有悬停功能的全功能链接。