Question

我正在尝试在<svg>内创建<div>。我在overflow: auto;规则中使用了#display，但<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添加到#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 2

您必须将position: relative提供给您的父元素，并且left和top值必须位于pixel。 Reduced宽度和height以方便使用。

＆＃13;

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

＆＃13;

#display {
    height: 250px;
    width: 250px;
    border: 1px solid black;
    overflow: auto;
    position: relative;
}

svg{
  max-width: 100%;
}

＆＃13;

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

＆＃13;

Answer 3

如果您希望在<div>内绘制SVG，则必须删除您在其上设置的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/

如何强制SVG包含在div中？

4 个答案: