3

该项目：

我目前正在执行通过 JS + jQuery 动态创建 SVG 元素的任务。一切顺利，我可以在屏幕上绘制所有基本形状。

问题：

<DEFS>当我尝试在块中声明形状并使用 绘制时<USE>，屏幕上没有绘制任何内容。

困惑：

尽管屏幕上没有绘制任何内容，但如果我通过 Firebug 或 Chrome 的 Dev 工具检查动态 DOM，则语法很好；我什至可以复制语法，放在一个.SVG文件中，它会正常工作。

附加信息：

  • 我正在使用内联 SVG
  • 使用 xhtml 而不是 html
  • 主要使用jQuery框架
  • 外面USE的任何东西都DEFS可以正常工作。

我的 jQuery 代码：

var $root = $('#svgRoot');

    $(document).ready(function(e) {
        init($root);

        var $defBlock = $(def(null, {}));
        $(ellipse('petal', {cx: '50%', cy: '50%', rx: '75', ry: '15'}, $defBlock));
        $(use(null, { x: '10%', y: '10%',   fill:'purple' , 'xlink:href':'#petal'}));

    });

这些都是自定义函数，第一个参数是元素 ID，其他都是属性。第三个参数是可选的。它指定要附加到的父级。如果为 null，则附加到根 SVG 节点。如果指定，它将附加到该父级。

使用 Chrome 检查时的输出：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgRoot" version="1.1">
    <svg:defs xmlns:svg="http://www.w3.org/2000/svg">
        <svg:ellipse id="petal" cx="50%" cy="50%" rx="75" ry="15" />
    </svg:defs>
    <svg:use xmlns:svg="http://www.w3.org/2000/svg" x="10%" y="10%" fill="purple" xlink:href="#petal" />
</svg>

帮助！

即使底层 DOM 是正确的，并且在放置在独立.SVG文件中时也可以正常工作，是否有人对不呈现代码有任何经验？

编辑：在引擎盖下

function createBasicNode(parent ,shape, id, attributes){
    var $tag = $(createSVG(shape));

    if(id != null){
        $tag.attr('id', id);
    }

    applyAttributes($tag, attributes);
    $tag.appendTo(parent);
    return $tag;
}

function def(id, attributes, parent){
    parent = (parent === undefined) ? $parent : parent;
    return $(createBasicNode(parent,'defs', id, attributes));
}

function use(id, attributes, parent){
    parent = (parent === undefined) ? $parent : parent;
    return $(createBasicNode(parent,'use', id, attributes));
}
4

2 回答 2

3

你在用createElementNS()吗？

您不能使用常规创建命名空间元素createElement()。如果你使用像 in 这样的前缀名称，createElement("svg:defs")它最终会成为标签名称的一部分（它没有语法，但想象一下类似的东西<null:svg\:defs>）。

在带有 HTML5 解析器的浏览器中，您可以使用它el.innerHTML = "<svg>…&lt;/svg>"来创建 SVG 命名空间元素，因为<svg>它是由解析器特例化的。

于 2013-03-26T01:26:13.227 回答
0

如果您不使用svg标签上的前缀，它会起作用。例如

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgRoot" version="1.1">
    <defs xmlns:svg="http://www.w3.org/2000/svg">
        <ellipse id="petal" cx="50%" cy="50%" rx="75" ry="15" />
    </defs>
    <use xmlns:svg="http://www.w3.org/2000/svg" x="10%" y="10%" fill="purple" xlink:href="#petal" />
</svg>
于 2013-03-25T19:09:20.010 回答