如何将svg放在div中

Question

我尝试在div里面创建多个svg标签，我希望所有的svg只存在于父div标签内，如果svg的坐标大于div的大小，我希望div成为一个滚动条以扩展空间。我也想把svg放在我想要的位置。我不确定如何实现它？非常感谢你。

$(document).ready(function() {
  $('#testbtm').click(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);
    svgElement.click(hexagonClick);
  }); //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);
      svgElement.click(hexagonClick);
    });
  }); // end click
  $('.hexagon').click(hexagonClick); // end click
}); // end ready

#display {
  height: 500px;
  width: 500px;
  border: 1px solid black;
}

<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

您可以使用overflow: auto;

$(document).ready(function() {
  $('#testbtm').click(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);
    svgElement.click(hexagonClick);
  }); //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);
      svgElement.click(hexagonClick);
    });
  }); // end click
  $('.hexagon').click(hexagonClick); // end click
}); // end ready

#display {
  height: 500px;
  width: 500px;
  border: 1px 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>