プロジェクト：
私は現在、JS+jQueryを介してSVG要素を動的に作成するタスクに取り組んでいます。すべて順調に進んでおり、基本的な形をすべて画面に描くことができます。
問題：
<DEFS>ブロックで図形を宣言して、で描画すると<USE>、画面に何も描画されません。
混乱：
画面には何も描画されませんが、FirebugまたはChromeの開発ツールを使用して動的DOMを検査すると、構文は問題ありません。構文をコピーして.SVGファイルに入れることもでき、問題なく動作します。
追加情報：
- インラインSVGを使用しています
- htmlではなくxhtmlを使用する
- 主に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であり、その他はすべて属性です。3番目のパラメーターはオプションです。追加する親を指定します。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));
}