& lt; element> .setAttributeNS (& # 39; http://www.w3.org/
<element>.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '<reference>'); not working in Firefox
我想通过使用javascript更改'use'标签的href来更改我在html页面中使用的svg代码。该代码在Chrome中运行良好,但在Firefox中运行不佳。
任何帮助都是感激的:)
EDIT - My code
// 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>
使用href而不是xlink:href
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;
}
}
<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>
相关文章:
- W3验证器->使用<脚本类型=“;text/javascript”>在html的正文中
- 如何使相机跟随地形's在此示例中的高度:http://threejs.org/examples/#webgl_t
- http://errors.angularjs.org/1.4.1/ngRepeat/dupes
- 如果标记是使用 JavaScript 动态构建的,Schema.org 标记是否有效?
- AMP-HTML 页面是否必须从 ampproject.org 加载 JavaScript 库?
- 为什么可以'tI将IMG元素链接到类似于“;http://en.wikipedia.org/wiki/File:
- 无法在bl.ocks.org中查看脚本的输出
- 模块名称“;mysql”;尚未为上下文_加载.使用require([])http://requirejs.org/doc
- 全局安装grunt失败,我可以'在npmjs.org上找不到
- 如何为chart.js(chartjs.org)中的所有图表类型添加标签/图例
- 使用 W3 的多个幻灯片放映出现问题..CSS
- Cordova/phonegap 插件兼容性问题 - org.chromium.socket / org.chromiu
- W3 用 1 行 JavaScript 代码验证 html 错误
- 在 php 中 whateverorigin.org 调用替换为本地代理
- 您如何在Google富集摘要测试工具中测试AngularJS网络应用程序的 schema.org 元标记
- 将 XML 字符串转换为 org.w3c.dom.Document
- Codelab(bitbucket.org) 示例步骤 6,不跨网络工作
- 如何在 JavaScript 中使用正则表达式删除 .com,.org,.co.uk,.co.us
- & lt; element> .setAttributeNS (& # 39; http://www.w3.org/
- 如何在w3.org上展开和折叠?