如何在div内放置svg

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>