在svg的中心放置文本

Question

我正在創建一個<svg>，我想將文本放在<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>

Answer 1

你對你開放svg標籤缺少一個右括號>。