<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>당신이해야 할 일은 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다