0
Я пытаюсь создать несколько svg-тегов внутри div, я хочу, чтобы все svg существовали только внутри родительского тега div, если координата svg больше, чем размер div , Я хочу, чтобы div стал полосой прокрутки для расширения пространства. Я также хочу разместить svg в позиции, которую я хочу. Я не уверен, как это произошло? Большое спасибо.Как разместить svg внутри div
$(document).ready(function() {
$('#testbtm').click(function() {
var svgElement = $('<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>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
svgElement.click(hexagonClick);
}); //end click
$('#testbtm2').click(function() {
$('.hexagon').each(function() {
var svgElement = $('<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>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
svgElement.click(hexagonClick);
});
}); // end click
$('.hexagon').click(hexagonClick); // end click
}); // end ready
#display {
height: 500px;
width: 500px;
border: 1px solid black;
}
<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>
<button id="testbtm2">test2</button>
Привет, как насчет я хочу, чтобы поместить ГСВ в координате, что я хочу, я только знаю, как для размещения svg, и позиция автоматически помещается, но как разместить svg, например x = 30 0, y = 400? Спасибо – tiger
Вы должны попробовать css-свойства: 'position: relative; top: 20px; left: 10px; '. Эти свойства должны быть реализованы в теге '