Question

我想通过使用javascript更改'use'标签的href来更改我在html页面中使用的svg代码。该代码在Chrome中运行良好，但在Firefox中效果不佳。

感谢任何帮助：）

编辑 - 我的代码

// javascript


function OnHover(x)
{
    switch (x)
    {
            case 1:
            document.getElementById("icon2svg").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#SVGicon-2-grad');
            break;
        case 2:
            document.getElementById("icon2svg").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#SVGicon-2');
            break;
        case 3:...
    }
}


<!-- HTML -->



<div id="vi2" class="vertical-inner-inactive">
    <svg> <use id="icon2svg" xlink:href="#SVGicon-2"></use></svg>
    <p id="icon2text">Text</p>
</div>

<svg version="1.1" id="SVGicon-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 350">
    <path fill="#fff" d="M173.332,277.78v0.021c0,0-0.009-0.004-0.022-0.011c-0.014,0.007-0.022,0.011-0.022,0.011v-0.021
    c-2.244-1.036-97.775-45.949-89.042-180.789c0,0,39.924-3.001,89.042-27V69.97c0.007,0.003,0.015,0.007,0.022,0.011
    c0.008-0.004,0.014-0.008,0.022-0.011v0.021c49.117,23.999,89.041,27,89.041,27C271.107,231.831,175.577,276.744,173.332,277.78z
     M173.443,307.058c-2.9-1.313-123.891-58.404-111.484-229.797c2.538-0.191,50.776-3.814,113.438-34.318
    c62.256,30.503,110.439,34.127,112.975,34.318C298.166,248.653,176.305,305.744,173.443,307.058z M271.104,89.453
    c0,0-43.838-3.295-97.771-29.646v-0.024c-0.007,0.004-0.016,0.007-0.024,0.012c-0.008-0.004-0.017-0.008-0.024-0.012v0.024
    c-53.933,26.351-97.771,29.646-97.771,29.646c-9.59,148.058,95.307,197.376,97.771,198.514v0.022c0,0,0.009-0.006,0.024-0.011
    c0.015,0.005,0.024,0.011,0.024,0.011v-0.022C175.798,286.829,280.695,237.511,271.104,89.453z"/>
</svg>

<svg version="1.1" id="SVGicon-2-grad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 350">
<path fill="url(#PINK-RED_topdown)" d="M173.332,277.78v0.021c0,0-0.009-0.004-0.022-0.011c-0.014,0.007-0.022,0.011-0.022,0.011v-0.021
    c-2.244-1.036-97.775-45.949-89.042-180.789c0,0,39.924-3.001,89.042-27V69.97c0.007,0.003,0.015,0.007,0.022,0.011
    c0.008-0.004,0.014-0.008,0.022-0.011v0.021c49.117,23.999,89.041,27,89.041,27C271.107,231.831,175.577,276.744,173.332,277.78z
     M173.443,307.058c-2.9-1.313-123.891-58.404-111.484-229.797c2.538-0.191,50.776-3.814,113.438-34.318
    c62.256,30.503,110.439,34.127,112.975,34.318C298.166,248.653,176.305,305.744,173.443,307.058z M271.104,89.453
    c0,0-43.838-3.295-97.771-29.646v-0.024c-0.007,0.004-0.016,0.007-0.024,0.012c-0.008-0.004-0.017-0.008-0.024-0.012v0.024
    c-53.933,26.351-97.771,29.646-97.771,29.646c-9.59,148.058,95.307,197.376,97.771,198.514v0.022c0,0,0.009-0.006,0.024-0.011
    c0.015,0.005,0.024,0.011,0.024,0.011v-0.022C175.798,286.829,280.695,237.511,271.104,89.453z"/>
</svg>

Answer 1

只需使用href而不是xlink：href

＆＃13;

x = 1

function go()
{
  OnHover(x);
  x = 3-x;
  }

function OnHover(x)
{
      switch (x)
    {
            case 1:
            document.getElementById("icon2svg").setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#SVGicon-2-grad');
            break;
        case 2:
            document.getElementById("icon2svg").setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#SVGicon-2');
            break;
    }
}

＆＃13;

<div id="vi2" class="vertical-inner-inactive">
    <svg> <use onclick="go()" id="icon2svg" xlink:href="#SVGicon-2"></use></svg>
    <p id="icon2text">Text</p>
</div>

<svg version="1.1" id="SVGicon-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 350">
    <path fill="black" d="M173.332,277.78v0.021c0,0-0.009-0.004-0.022-0.011c-0.014,0.007-0.022,0.011-0.022,0.011v-0.021
    c-2.244-1.036-97.775-45.949-89.042-180.789c0,0,39.924-3.001,89.042-27V69.97c0.007,0.003,0.015,0.007,0.022,0.011
    c0.008-0.004,0.014-0.008,0.022-0.011v0.021c49.117,23.999,89.041,27,89.041,27C271.107,231.831,175.577,276.744,173.332,277.78z
     M173.443,307.058c-2.9-1.313-123.891-58.404-111.484-229.797c2.538-0.191,50.776-3.814,113.438-34.318
    c62.256,30.503,110.439,34.127,112.975,34.318C298.166,248.653,176.305,305.744,173.443,307.058z M271.104,89.453
    c0,0-43.838-3.295-97.771-29.646v-0.024c-0.007,0.004-0.016,0.007-0.024,0.012c-0.008-0.004-0.017-0.008-0.024-0.012v0.024
    c-53.933,26.351-97.771,29.646-97.771,29.646c-9.59,148.058,95.307,197.376,97.771,198.514v0.022c0,0,0.009-0.006,0.024-0.011
    c0.015,0.005,0.024,0.011,0.024,0.011v-0.022C175.798,286.829,280.695,237.511,271.104,89.453z"/>
</svg>

<svg version="1.1" id="SVGicon-2-grad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 350">
<path fill="red" d="M173.332,277.78v0.021c0,0-0.009-0.004-0.022-0.011c-0.014,0.007-0.022,0.011-0.022,0.011v-0.021
    c-2.244-1.036-97.775-45.949-89.042-180.789c0,0,39.924-3.001,89.042-27V69.97c0.007,0.003,0.015,0.007,0.022,0.011
    c0.008-0.004,0.014-0.008,0.022-0.011v0.021c49.117,23.999,89.041,27,89.041,27C271.107,231.831,175.577,276.744,173.332,277.78z
     M173.443,307.058c-2.9-1.313-123.891-58.404-111.484-229.797c2.538-0.191,50.776-3.814,113.438-34.318
    c62.256,30.503,110.439,34.127,112.975,34.318C298.166,248.653,176.305,305.744,173.443,307.058z M271.104,89.453
    c0,0-43.838-3.295-97.771-29.646v-0.024c-0.007,0.004-0.016,0.007-0.024,0.012c-0.008-0.004-0.017-0.008-0.024-0.012v0.024
    c-53.933,26.351-97.771,29.646-97.771,29.646c-9.59,148.058,95.307,197.376,97.771,198.514v0.022c0,0,0.009-0.006,0.024-0.011
    c0.015,0.005,0.024,0.011,0.024,0.011v-0.022C175.798,286.829,280.695,237.511,271.104,89.453z"/>
</svg>

＆＃13;

<element> .setAttributeNS（'http://www.w3.org/1999/xlink'，'xlink：href'，'<reference>'）;不在Firefox中工作

1 个答案: