如何添加svg形狀的編輯文本

正在爲Alphabeta修剪做一個遊戲樹，我已經使用svg創建了樹，但是現在我想在樹內添加可編輯文本，並且能夠在我的計算中使用輸入的值。就像使用我在計算中輸入的值一樣。如何添加svg形狀的編輯文本

任何人都可以幫助我這個。

html, body { 
 
background: #EEE; 
 
} 
 
svg { 
 
background-color: #EEE; 
 
cursor: default; 
 
-webkit-user-select: none; 
 
-moz-user-select: none; 
 
-ms-user-select: none; 
 
-o-user-select: none; 
 
user-select: none; 
 
} 
 

 
.navbar .navbar-nav a, 
 
.navbar .navbar-header span { 
 
color: #FFF; 
 
cursor: default; 
 
} 
 

 
.nopadding { 
 
padding: 0 !important; 
 
} 
 

 
.nomargin { 
 
margin: 0 !important; 
 
} 
 

 
.ab-tree { 
 
position:; 
 
} 
 

 
.info { 
 
z-index: 10; 
 
position: absolute; 
 
bottom: 6px; 
 
left: 6px; 
 
font-size: 9px; 
 
} 
 

 
.prune-info { 
 
z-index: 10; 
 
position: absolute; 
 
bottom: 6px; 
 
right: 6px; 
 
font-size: 14px; 
 
} 
 

 
.ctrl-panel { 
 
z-index: 10; 
 
position: relative; 
 
float: right; 
 
width: 325px; 
 
padding: 10px; 
 
margin: 10px; 
 
background: rgba(0, 0, 0, 0.08); 
 
border-radius: 4px; 
 
font-size: 12px; 
 
} 
 

 
.ctrl-panel .btn { 
 
font-size: 12px; 
 
} 
 

 
.ctrl-panel hr { 
 
margin: 10px; 
 
height: 0; 
 
border: 0; 
 
border-top: 1px solid #ccc; 
 
} 
 

 
.ctrl-panel .row { 
 
margin: 5px 0; 
 
} 
 

 
.ctrl-panel .row > div { 
 
padding-left: 2.5px; 
 
padding-right: 2.5px; 
 
margin-left: 0; 
 
margin-right: 0; 
 
} 
 

 
.ctrl-panel .row .progress { 
 
margin-bottom: 0; 
 
padding: 0; 
 
} 
 

 
.ctrl-panel .row .slider-handle { 
 
background-color: #428BCA; 
 
background-image: none; 
 
opacity: 1; 
 
} 
 

 
.button-label-container { 
 
padding: 7px 0 0 0; 
 
margin: 0; 
 
} 
 

 
.button-label { 
 
padding: 0 3px; 
 
} 
 

 
.slider-label.left { 
 
padding: 0 10px 0 0; 
 
} 
 

 
.slider-label.right { 
 
padding: 0 0 0 10px; 
 
} 
 

 
.answer-true { 
 
color: #008800; 
 
} 
 

 
path.link { 
 
fill: none; 
 
stroke: #000; 
 
stroke-width: 4px; 
 
} 
 

 
path.link.hover { 
 
stroke: #666666; 
 
} 
 

 
path.link.entered, 
 
path.link.entered.hover { 
 
stroke: #008800; 
 
} 
 

 
path.link.pruned { 
 
stroke-dasharray: 10,10; 
 
stroke: #880000; 
 
} 
 

 
path.link.pruned.hover { 
 
stroke: #cd0000; 
 
} 
 

 
path.mouselink { 
 
stroke-width: 30px; 
 
stroke: #000; 
 
stroke-opacity: 0; 
 
cursor: pointer; 
 
} 
 

 

 
g.node path { 
 
cursor: pointer; 
 
fill: #FFF; 
 
stroke: #000; 
 
} 
 
g.node path:hover { 
 
fill: #EEE; 
 
} 
 
g.node.entered path { 
 
fill: #EEFFEE; 
 
} 
 

 
g.node.leaf path { 
 
fill: #FFF; 
 
} 
 
g.node.leaf path:hover { 
 
fill: #EEE; 
 
} 
 
g.node.entered.leaf path { 
 
fill: #EEEEFF; 
 
} 
 

 
rect.cursor { 
 
fill: #000; 
 
} 
 

 
text { 
 
font-family: 'Helvetica Neue', sans-serif; 
 
font-size: 18px; 
 
pointer-events: none; 
 
} 
 

 
text.value { 
 
text-anchor: middle; 
 
font-weight: bold; 
 
} 
 

 
g.node.pruned .alpha, 
 
g.node.pruned .beta { 
 
fill: #AA0000; 
 
}

<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
</head> 
 
<body ng-controller="MainCtrl" class="ng-scope" data-pinterest-extension-installed="cr2.0.5"> 
 
<div class="container-fluid nopadding"> 
 
<ab-tree class="ab-tree ng-isolate-scope" > 
 
<svg width="1350" height="606"><g><g> 
 
<path class="link" d="M675,100L291.66666666666663,303"></path> 
 
<path class="mouselink" d="M675,100L291.66666666666663,303"></path></g><g> 
 
<path class="link" d="M291.66666666666663,303L163.88888888888889,506"></path> 
 
<path class="mouselink" d="M291.66666666666663,303L163.88888888888889,506"></path></g><g> 
 
<path class="link" d="M291.66666666666663,303L291.66666666666663,506"></path> 
 
<path class="mouselink" d="M291.66666666666663,303L291.66666666666663,506"></path></g><g> 
 
<path class="link" d="M291.66666666666663,303L419.44444444444446,506"></path> 
 
<path class="mouselink" d="M291.66666666666663,303L419.44444444444446,506"></path></g><g> 
 
<path class="link" d="M675,100L675,303"></path> 
 
<path class="mouselink" d="M675,100L675,303"></path></g><g> 
 
<path class="link" d="M675,303L547.2222222222222,506"></path> 
 
<path class="mouselink" d="M675,303L547.2222222222222,506"></path></g><g> 
 
<path class="link" d="M675,303L675,506"></path> 
 
<path class="mouselink" d="M675,303L675,506"></path></g><g> 
 
<path class="link" d="M675,303L802.7777777777778,506"></path> 
 
<path class="mouselink" d="M675,303L802.7777777777778,506"></path></g><g> 
 
<path class="link" d="M675,100L1058.3333333333333,303"></path> 
 
<path class="mouselink" d="M675,100L1058.3333333333333,303"></path></g><g> 
 
<path class="link" d="M1058.3333333333333,303L930.5555555555555,506"></path> 
 
<path class="mouselink" d="M1058.3333333333333,303L930.5555555555555,506"></path></g><g> 
 
<path class="link" d="M1058.3333333333333,303L1058.3333333333333,506"></path> 
 
<path class="mouselink" d="M1058.3333333333333,303L1058.3333333333333,506"></path></g><g> 
 
<path class="link" d="M1058.3333333333333,303L1186.111111111111,506"></path> 
 
<path class="mouselink" d="M1058.3333333333333,303L1186.111111111111,506"></path></g></g><g><g class="node"> 
 
<path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(715,76.90598923241495) rotate(180)"></path> 
 
<text class="value" x="675" y="106"></text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="720" y="96"></text> 
 
<text class="beta" x="720" y="116"></text></g> <g class="node"> 
 
<path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(251.66666666666663,326.094010767585)"></path> 
 
<text class="value" x="291.66666666666663" y="309"></text> 
 
<text class="prunemsg"></text><text class="alpha" x="336.66666666666663" y="299"></text> 
 
<text class="beta" x="336.66666666666663" y="319"></text></g> 
 
<g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(123.88888888888889,546)"></path> 
 

 
<text class="value" x="163.88888888888889" y="512">6</text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="208.88888888888889" y="502"></text> 
 
<text class="beta" x="208.88888888888889" y="522"></text></g><g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(251.66666666666663,546)"></path> 
 
<text class="value" x="291.66666666666663" y="512">9</text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="336.66666666666663" y="502"></text> 
 
<text class="beta" x="336.66666666666663" y="522"></text></g><g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(379.44444444444446,546)"></path> 
 
<text class="value" x="419.44444444444446" y="512">-5</text> 
 
<text class="prunemsg"></text><text class="alpha" x="464.44444444444446" y="502"></text> 
 
<text class="beta" x="464.44444444444446" y="522"></text></g><g class="node"> 
 
<path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(635,326.094010767585)"></path> 
 
<text class="value" x="675" y="309"></text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="720" y="299"></text> 
 
<text class="beta" x="720" y="319"></text></g> 
 
<g class="node leaf"><path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(507.2222222222222,546)"></path> 
 
<text class="value" x="547.2222222222222" y="512">-17</text> 
 
<text class="prunemsg"></text><text class="alpha" x="592.2222222222222" y="502"></text> 
 
<text class="beta" x="592.2222222222222" y="522"></text></g><g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(635,546)"></path> 
 
<text class="value" x="675" y="512">18</text> 
 
<text class="prunemsg"></text><text class="alpha" x="720" y="502"></text> 
 
<text class="beta" x="720" y="522"></text></g><g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(762.7777777777778,546)"></path> 
 
<text class="value" x="802.7777777777778" y="512">-1</text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="847.7777777777778" y="502"></text> 
 
<text class="beta" x="847.7777777777778" y="522"></text></g> 
 
<g class="node"><path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(1018.3333333333333,326.094010767585)"></path> 
 
<text class="value" x="1058.3333333333333" y="309"></text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="1103.3333333333333" y="299"></text> 
 
<text class="beta" x="1103.3333333333333" y="319"></text></g> 
 
<g class="node leaf"><path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(890.5555555555555,546)"></path> 
 
<text class="value" x="930.5555555555555" y="512">7</text> 
 
<text class="prunemsg"></text><text class="alpha" x="975.5555555555555" y="502"></text> 
 
<text class="beta" x="975.5555555555555" y="522"></text></g><g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(1018.3333333333333,546)"></path> 
 
<text class="value" x="1058.3333333333333" y="512">-13</text> 
 
<text class="prunemsg"></text><text class="alpha" x="1103.3333333333333" y="502"></text> 
 
<text class="beta" x="1103.3333333333333" y="522"></text></g><g class="node leaf"> 
 
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(1146.111111111111,546)"></path> 
 
<text class="value" x="1186.111111111111" y="512">-20</text> 
 
<text class="prunemsg"></text> 
 
<text class="alpha" x="1231.111111111111" y="502"></text> 
 
<text class="beta" x="1231.111111111111" y="522"></text></g></g> 
 
</svg> 
 
</ab-tree> 
 
</div> 
 
</body> 
 
</html>

來源

2016-11-24 Gizele

編程方式使用[D3] [1]：我希望這能幫助:)

body = d3.select('body') 
svg = body.append('svg').attr('height', 600).attr('width', 200) 
rect = svg.append('rect').transition().duration(500).attr('width', 150) 
       .attr('height', 100) 
       .attr('x', 40) 
       .attr('y', 100) 
       .style('fill', 'white') 
       .attr('stroke', 'black') 
text = svg.append('text').text('This is some information about whatever') 
       .attr('x', 50) 
       .attr('y', 150) 
       .attr('fill', 'black') 


    [1]: http://d3js.org/

來源

2016-11-24 21:26:05

它沒有工作:( – Gizele

如何添加svg形狀的編輯文本

回答

相關問題