[编辑]我很抱歉这是我第一次在这里寻求帮助。代码最初没有正确粘贴，所以这里是我创建的jsfiddle的链接，在评论https://jsfiddle.net/silvioj/0gp6rL3u/中请求了，再次感谢！[编辑]（如果你将鼠标悬停在空白查找按钮上＆＃ 39;看到效果。）
下面附有完整的代码。基本上我已经尝试了几种不同的方式，它似乎运行良好，直到我在IE中测试它。基本上我有一个用在线工具生成的圆形菜单。当圆圈位于中心时，我计划在按钮悬停时更改填充图像。
以下代码与我认为可能存在的问题重复。它在Chrome和Firefox中运行良好，但IE 9 10 11是不行的。
请帮助，这是我第一次使用svg为我的客户进行实验。
提前致谢！
<pattern id="image2" x="0" patternContentUnits="objectBoundingBox" y="0" height="100%" width="100%">
<image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://ewi.silviotech.com/wp-content/themes/ExhibitWorks2015/images/logomain_01.png">
<set attributeName="xlink:href" to="http://silviotech.com/wp-content/themes/SilvioTech2015/images/logol.png" begin="item12.mouseover" end="item12.mouseout"/> </image>
</pattern>
<!-- SVG Menu Generated By CIRCULUS.SVG :: http://sarasoueidan.com/tools/circulus -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" preserveAspectRatio="xMidYMin slice" id="menu" style="transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px); touch-action: none; -webkit-user-select: none;width: 100%; padding-bottom: 100%; height: 1px; overflow: visible">
<style>
#menu {
display: block;
margin: 0 auto;
/*overflow: visible;*/ /* uncomment this if you are using bouncing animations*/
}
a {
cursor: pointer;
outline: none;
}
/* You can change these default styles any way you want */
.item .sector {
transition: all .1s linear;
fill: #fff;
stroke: #111;
}
.item:hover .sector, .item:focus .sector {
fill: #eee;
}
.menu-trigger {
fill: #EA2A55;
pointer-events: auto;
}
.menu-trigger:hover, .menu-trigger:focus {
cursor: pointer;
}
symbol {
overflow: visible; /* KEEP THIS so that text will not get cut off it it is wider than the icon width */
}
#circwind
{
background:#fff;
}
</style>
<g id="symbolsContainer"> <symbol class="icon icon-" id="icon-1" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text></symbol>
<symbol class="icon icon-" id="icon-2" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="0" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text></symbol>
<symbol class="icon icon-" id="icon-3" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text></symbol>
<symbol class="icon icon-" id="icon-4" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text></symbol>
<symbol class="icon icon-" id="icon-5" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text></symbol>
<symbol class="icon icon-" id="icon-6" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text></symbol>
<symbol class="icon icon-" id="icon-7" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text></symbol>
<symbol class="icon icon-" id="icon-8" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text></symbol>
<symbol class="icon icon-" id="icon-9" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">9</text></symbol>
<symbol class="icon icon-" id="icon-10" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">10</text></symbol>
<symbol class="icon icon-" id="icon-11" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">11</text></symbol>
<symbol class="icon icon-" id="icon-12" viewBox="0 0 37 37"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">12</text></symbol>
<pattern id="image2" x="0" patternContentUnits="objectBoundingBox" y="0" height="100%" width="100%">
<image x="0" y="0" width="1" height="1" preserveAspectRatio="none" xlink:href="http://silviotech.com/wp-content/uploads/2015/07/logor1.png">
<set attributeName="xlink:href" to="http://silviotech.com/wp-content/themes/SilvioTech2015/images/logol.png" begin="item12.mouseover" end="item12.mouseout"/> </image>
</pattern>
</circle>
<!-- menu button label or icon goes here -->
</svg>