0

我正在尝试使用 Javascript 加载 SVG。我经常成功地做到这一点，但这一次它有一个奇怪的回报。

这是我的 JS

var xmlns = 'http://www.w3.org/2000/svg';
var container = document.getElementById('svgContainer');
var svg = document.createElementNS(xmlns, 'svg');
svg.setAttribute('xmlns', xmlns);
svg.setAttribute('version', '1.2');
var defs = document.createElementNS(xmlns, 'defs');
var lg = document.createElementNS(xmlns, 'linearGradient');
lg.setAttribute('id', 'lg');
defs.appendChild(lg);
var stop1 = document.createElementNS(xmlns, 'stop');
stop1.setAttribute('offset', '0');
stop1.setAttribute('style', 'stop-color:#ffffff;stop-opacity:1');
lg.appendChild(stop1);
var stop2 = document.createElementNS(xmlns, 'stop');
stop2.setAttribute('offset', '1');
stop2.setAttribute('style', 'stop-color:#000000;stop-opacity:1');
lg.appendChild(stop2);
var rg = document.createElementNS(xmlns, 'radialGradient');
rg.setAttribute('cx', '171.20810');
rg.setAttribute('cy', '196.85463');
rg.setAttribute('r', '200.00000');
rg.setAttribute('fx', '171.20810');
rg.setAttribute('fy', '196.85463');
rg.setAttribute('id', 'rg');
rg.setAttribute('xlink:href', '#lg');
rg.setAttribute('gradientUnits', 'userSpaceOnUse');
rg.setAttribute('gradientTransform', 'matrix(1.040418,0.796229,-0.814518,1.064316,153.4218,-150.4353)');
defs.appendChild(rg);
svg.appendChild(defs);
var g = document.createElementNS (xmlns, 'g');
g.setAttribute('transform', 'scale(0.2,0.2)');
svg.appendChild(g);
container.appendChild(svg);
var path = document.createElementNS (xmlns, 'path');
path.setAttribute('d', 'M 450.00000 255.00000 A 200.00000 205.00000 0 1 1  50.000000,255.00000 A 200.00000 205.00000 0 1 1  450.00000 255.00000 z');
path.setAttribute('style', 'opacity:1.0000000;fill:url(#rg);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:8.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1');
g.appendChild(path);

所以它以正确的顺序生成完美的 HTML DOM 元素，但它不显示任何内容。当我从源代码复制 HTML 并将其粘贴时，它会呈现 HTML 而不是 Javascript，但它是完全相同的代码。

您可以在此处查看源代码。

奇怪的是，当我将radialGradient 放入DOM 时，它就起作用了。你可以在这里看到它。

那么我该怎么做呢？这个问题出现在所有浏览器上。

谢谢您的帮助。

=== 编辑 ===
在 Robert Longson 的帮助下，我设法解决了这个问题，在这里查看

4

1 回答 1

2

您不能使用 setAttribute 设置 xlink:href，您必须使用 setAttributeNS 例如

var xlinkns = 'http://www.w3.org/1999/xlink';
rg.setAttributeNS(xlinkns, 'xlink:href', '#lg');

以这种方式更改您的 jsfiddle 使其可以在 Firefox 上运行。我没有测试过其他 UA，但它们也应该可以工作。

于 2012-11-04T16:58:40.153 回答