如何强制将 SVG 包含在 div 中？

Question

我正在尝试创建一个<svg>inside a <div>. 我已经overflow: auto;在#display规则中使用了，但<svg>仍然超出了<div>. 我希望<svg>只出现在 的内部，<div>就好像<div>是 的显示窗口一样<svg>。当<svg>超出 的一侧时<div>，我想在 only 的一侧放置一个滚动条<div>。我很感激你的帮助。

$(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 1

您所需要做的就是添加position: relative到您的#display.

既然您已经position: absolute指定，它将查找最接近的祖先定位（非静态）元素。由于#display不是定位元素，它采用初始包含块，这意味着可见视口作为定位自身的锚点。这就是为什么您会看到<svg>似乎从<div>.

当然，使用当前的内联样式，您的六边形将出现在可滚动的右下角#display。

编辑：我已将内联样式移出到您的类下指定的外部样式表.hexagon，因为在不移出内联样式的情况下显示数字似乎存在问题。尽管如此，这可以让您的结果保留偏移尺寸，同时保持#display可滚动。

尝试下面的代码：

$(document).ready(function(){
    $('#testbtm').click(function(){
        var str = '<svg class="hexagon 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; /* add this line! */
}

.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>