如何强制将 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

如果您希望

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