将文本放置在svg的中心
Placing text in the center of svg
我正在创建一个<svg>
,我想把文本放在<svg>
的中心,当我点击第一个按钮时,svg没有文本,当我单击第二个按钮时会显示文本。第一个我只是添加svg的位置。但我不知道为什么文本没有出现?
谢谢
$(document).ready(function() {
$('#testbtm').click(function() {
var str = '<svg class="hexagon" class="ui-widget-content" style="position:absolute; left:200; top:300;"'
<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);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
}); //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);
});
}); // end click
}); // end ready
#display {
height: 500 px;
width: 500 px;
border: 1 px 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>
在打开的svg
标记上缺少一个右括号>
。
相关文章:
- 通过键盘编写SVG文本
- 将指针事件限制为SVG文本填充
- 如何添加 SVG 文本标记 从 JavaScript 函数返回的值
- 如何在javascript中使用svg文本标签
- 在鼠标悬停d3js上更改SVG文本的文本
- 使用d3.js删除svg文本元素
- 用javascript获取svg文本值
- svg文本居中异常
- 用逗号增加svg文本
- SVG文本锚点设置使文本元素移动
- Svg文本元素被另一个Svg元素重叠
- D3.js-围绕一个点旋转svg文本
- 如何查找 SVG 文本位置
- SVG 文本路径 - 动画开始偏移量(文本向下滑动 SVG 路径) - 在 JS 中
- 递增 SVG 文本区域中的 % 值
- 如何在javascript中换行svg文本
- 避免在拖动时跳转带有文本锚点的 SVG 文本
- D3JS SVG 文本和形状在同一行上
- 将省略号放在反应 svg 文本组件上
- 允许 SVG 文本在角度中可编辑