2016-05-05 38 views
0

div内に複数のsvgタグを作成しようとしましたが、svgの座標がdivのサイズより大きい場合、すべてのsvgが親divタグ内にのみ存在するようにします私はdivをスクロールバーにしてスペースを広げたいと思っています。私はまた、私が望むポジションにsvgを配置したい。私はそれが起こるようにする方法がわからないのですか?どうもありがとうございました。div内にsvgを配置する方法

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

答えて

0

あなたは私が私がしたいことを座標でSVGを配置したいについて何overflow: auto;

$(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; 
 
    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> 
 
<button id="testbtm2">test2</button>

+0

こんにちは、使用することができ、私は唯一の方法を知っていますsvgを配置すると、その位置は自動的に配置されますが、xv = 30 0、y = 400? – tiger

+0

あなたはCSSのプロパティを試してみるべきです: 'position:relative; top:20px;左:10ピクセル;これらのプロパティは ''タグで実装する必要があります。 –

関連する問題