努力使用 JavaScript 创建 SVG 形状答案

【问题标题】：Struggling to create SVG shape using JavaScript努力使用 JavaScript 创建 SVG 形状
【发布时间】：2011-02-27 17:44:47
【问题描述】：

我已经阅读了与使用 JavaScript 创建 SVG 相关的其他问题并点击了任何链接，但我似乎无法让它工作。也许这里有人可以发现我哪里出错了。

编辑：我目前在文档正文中有一个 ID 为“svgbasics”的 div，我正在尝试使用从 XML 文档中检索到的值创建一个 SVG 形状。

当我加载页面时，什么都没有出现。

这是我的代码：

                      var questions = [];
                  for (j=0; j<arrayIds.length; j++)
                  { 
                    $(xml).find("C[ID='" + arrayIds[j] + "']").each(function(){
                        // pass values
                        questions[j] = 
                        {
                            typ: $(this).attr('typ'),
                            width: $(this).find("I").attr('wid'),
                            height: $(this).find("I").attr('hei'),
                            x: $(this).find("I").attr('x'),
                            y: $(this).find("I").attr('x'),
                            baC: $(this).find("I").attr('baC'),
                            boC: $(this).find("I").attr('boC'),
                            boW: $(this).find("I").attr('boW')
                        }


                        if ($(this).attr('typ') == '3')
                        {
                              var shape = this.id;
                              var svg = $('#svgbasics').svg('get');

                              svg.rect(x($(this).find("I").attr('x')),
                              y($(this).find("I").attr('y')),
                              width($(this).find("I").attr('width')),
                              height($(this).find("I").attr('height')),
                              {fill: colours[$(this).find("I").attr('baC')]});

                        } else {
                            // Add here
                            alert($(this).find("I").attr('x'));
                        }
                    });
                  }

【问题讨论】：

如果您已经在使用 JavaScript，使用
我选择使用 SVG 的原因是因为我计划使用 SVG 形状来构建 UI，据我了解，SVG 是比 Canvas 更好的事件处理选择。

标签： javascript jquery xml html svg

【解决方案1】：

如果没有完整的上下文，很难说出哪里出了问题。我首先建议在 DOM/JS 调试器中检查您的内容，例如 Opera Dragonfly、Webkit Web Inspector 或 Mozilla Firebug。验证您的所有元素是否已正确创建，并且在 DOM 树中看起来与您期望的一样。

【讨论】：