SVGをdivに含めるにはどうしたらいいですか？

Question

<div>の中に<svg>を作成しようとしています。 #displayルールでoverflow: auto;を使用しましたが、<svg>はまだ<div>の外にあります。 が<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); \t \t 
 
     svgElement.children('text').text(1); 
 
     $("#display").append(svgElement); \t 
 
    }); //end click \t 
 
}); // 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

あなたがする必要があるすべてはあなたの#displayにposition: relativeを追加することです。

position: absoluteが指定されているため、最も近い祖先に配置された（非静的な）要素が検索されます。 #displayが位置付けされた要素でない場合は、初期の包含ブロック、すなわち、可視のビューポートを、それ自体を位置付けるアンカーとして意味します。このため、のうち、<svg>がこぼれているように見えます。

もちろん、現在のインラインスタイルでは、スクロール可能な#displayの右下に六角形が表示されます。

編集：インラインスタイルを移動せずに番号を表示すると問題があるように思われるように私はあなたのクラス.hexagonの下に指定された外部スタイルシートにインラインスタイルを移動しました。それにもかかわらず、#displayをスクロール可能な状態に保ちながら、オフセットディメンションを保持した結果が得られます。あなたの親要素にposition: relativeを与え、あなたのleftとtop値はpixelでなければなりませんなきゃ

$(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); \t \t 
 
     svgElement.children('text').text(1); 
 
     $("#display").append(svgElement); \t 
 
    }); //end click \t 
 
}); // 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

あなたの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); \t \t 
 
     svgElement.children('text').text(1); 
 
     $("#display").append(svgElement); \t 
 
    }); //end click \t 
 
}); // 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 3

：

は、以下のコードを試してみてください。便宜上、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); \t \t 
 
     svgElement.children('text').text(1); 
 
     $("#display").append(svgElement); \t 
 
    }); //end click \t 
 
}); // 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 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); \t \t 
 
     svgElement.children('text').text(1); 
 
     $("#display").append(svgElement); \t 
 
    }); //end click \t 
 
}); // 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/