将文字放在svg的中心

debugcn 发表于 Dev

老虎

我正在创建一个<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	
  $('#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>

纳撒纳伦

您>在开始svg标签上缺少右括号。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。