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

Question

我正在尝试在<div> 中创建一个<svg>。我在#display 规则中使用了overflow: auto;，但<svg> 仍然超出<div>。我希望<svg> 只出现在<div> 内部，就好像<div> 是<svg> 的显示窗口一样。当<svg> 离开<div> 的一侧时，我只想在<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 提供给您的父元素，并且您的left 和top 值必须在pixel 中。 Reduced 宽度和 height 为方便起见。

$(document).ready(function(){
    $('#testbtm').click(function(){
        var str = '<svg class="hexagon" class="ui-widget-content"   style="position:absolute; left:50%; top:50%; transform: translate(-50%,-50%)">\
        <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: 250px;
    width: 250px;
    border: 1px solid black;
    overflow: auto;
    position: relative;
}

svg{
  max-width: 100%;
}

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

您只需将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>

Answer 3

如果您希望将 SVG 绘制在 <div> 内，则必须删除您在其上设置的 position: absolute。

$(document).ready(function(){
    $('#testbtm').click(function(){
        var str = '<svg class="hexagon" class="ui-widget-content"   width="1000px" height="1000px">\
        <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 4

我认为你正在寻找这样的事情：

$(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;
}
.hexagon{
    height:150px;
    width:150px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

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

这是给你的小提琴好东西：https://jsfiddle.net/hb796myn/