Question

我目前正在尝试使用HTML5和JQuery创建一个SVG生成器。为了使这“可行”，我创建一个空的HTML5 SVG元素，然后使用JQuery在其上添加一些HTML5 Polygon元素。

问题是.append（）使用JQuery添加的多边形不会出现在我的屏幕上。这有什么办法吗？使用Chrome开发者控制台，代码似乎是正确的。

JQuery（Developper Console View）生成的代码示例：

<svg id="map" width="800" height="600" style="width:800px;height:600px;background-color:white;border:1px solid #0000ff;">
    <polygon points="330, 285, 400, 250, 470, 285, 400, 320" style="fill:blue;stroke:black;stroke-width:0;fill-rule:evenodd;"></polygon>
</svg>

实际上，如果使用我的JQuery函数，此代码在我的屏幕上没有显示任何内容。

Answer 1

使它能够将JQuery thanx扩展到French Developper dascritch。

以下是我使用的代码：

jQuery.fn.extend({
    appendSVG:function (nom,attributs)
    {
        var svg = document.createElementNS("http://www.w3.org/2000/svg",nom);
        for (var cle in attributs)
        {
            var valeur = attributs[cle];
            svg.setAttribute(cle,valeur);
        }
        var appendices = this.length;
        for (var i = 0; i < appendices; i++)
        {
            this[i].appendChild(svg);
        }
        return svg;
    }
});

并调用它（使用我自己的参数）：

$('svg#map').appendSVG('polygon',{points:''+initialPointForA1X+', '+initialPointForA1Y+', '+initialPointForB1X+', '+initialPointForB1Y+', '+initialPointForC1X+', '+initialPointForC1Y+', '+initialPointForD1X+', '+initialPointForD1Y+'',style:'fill:blue;stroke:black;stroke-width:0;fill-rule:evenodd;'});

这现在很好用！

不要错误地将XHTML声明添加到您的文档中。

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

有关详细信息，请参阅https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS。

[SVG] [HTML5] - 加载

1 个答案: