tiger tiger - 7 months ago 13
Javascript Question

How do I force a SVG to be contained in a div?

I am trying to create a

<svg>
inside a
<div>
. I have used
overflow: auto;
in the
#display
rule, but the
<svg>
still goes outside of the
<div>
. I want the
<svg>
to appear only inside of the
<div>
as if the
<div>
is the display window of
<svg>
. When the
<svg>
goes out of the side of
<div>
, I want to put a scroll bar on the side of the
<div>
only. I appreciate the help.



$(document).ready(function(){
$('#testbtm').click(function(){
var str = '<svg class="hexagon" class="ui-widget-content" style="position:absolute; left:800; top:800;">\
<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);
$("#display").append(svgElement);
}); //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>




Answer

All you need to do is add position: relative to your #display.

Since you have position: absolute specified as an inline-style, it will look for the closest ancestor positioned element. Without it being specified in #display it takes the initial containing block, meaning the visible viewport. This is why you see the spillover.

Of course, with your current inline styles, your hexagon would be at the bottom right of the scrollable #display.

Edit: I have moved out the inline style to an external stylesheet specified under your class .hexagon as there seems to be an issue with displaying the number without moving the inline style out. Nevertheless, this gets you your result preserving your offset dimensions while keeping the #display scrollable.

Try out the code below:

$(document).ready(function(){
    $('#testbtm').click(function(){
        var str = '<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>'
        var svgElement = $(str);		
        svgElement.children('text').text(1);
        $("#display").append(svgElement);	
    }); //end click	
}); // end ready
#display {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    overflow: auto;
  position: relative; // <- this!
}

.hexagon {  // <- extracted inline style to external stylesheet
  position: absolute;
  left: 800px;
  top: 800px;
}
<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>