私は<svg>
を作成していますが、<svg>
の中心にテキストを入れたいと思います。最初のボタンをクリックすると、svgにはテキストが表示されません。 2番目のボタン、テキストが表示されます。最初の1つは、私はsvgの位置を追加するだけです。テキストが表示されない理由はわかりません。svgの中心にテキストを配置
は、あなたがあなたの開口部svg
タグの閉じ括弧>
が欠落している
$(document).ready(function() {
$('#testbtm').click(function() {
var str = '<svg class="hexagon" class="ui-widget-content" style="position:absolute; left:200; top:300;"\
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"></svg>'
var svgElement = $(str);
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
}); //end click \t
$('#testbtm2').click(function() {
$('.hexagon').each(function() {
var svgElement = $('<svg class="hexagon" class="ui-widget-content">\
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"></svg>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
});
}); // end click
}); // end ready
#display {
height: 500 px;
width: 500 px;
border: 1 px solid black;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="display"></div>
<button id="testbtm">test</button>
<button id="testbtm2">test2</button>
最初のボタンをクリックすると、六角形が表示されます。 2番目のボタンをクリックすると、六角形の中央に番号1が表示されます。それは期待された結果ではありませんか? (IEを使用して) – m69
いいえ、私も最初の六角形に番号が必要です。私はなぜ2番目の六角形が番号を持っているのか混乱していますが、最初の服用ではありません。ありがとうございます – tiger