如何在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>