D3 svg text标签控制

没有任何控制，text的锚点指向的左下的位置

<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script>
svg=d3.select('svg')
svg.append('text').text('text').attr("x",25).attr('y',25)
//  .attr('text-anchor',"middle")
//  .attr('dy','.35em')svg.append('text').text('text').attr("x",50).attr('y',50)
//  .attr('text-anchor',"middle")
//  .attr('dy','.35em')svg.append('line').attr('x1',25).attr('y1',25).attr('x2',50).attr('y2',50).attr('stroke','black')</script>
</body>
</html>

水平方向居中

<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script>
svg=d3.select('svg')
svg.append('text').text('text').attr("x",25).attr('y',25).attr('text-anchor',"middle")
//  .attr('dy','.35em')svg.append('text').text('text').attr("x",50).attr('y',50).attr('text-anchor',"middle")
//  .attr('dy','.35em')svg.append('line').attr('x1',25).attr('y1',25).attr('x2',50).attr('y2',50).attr('stroke','black')</script>
</body>
</html>

水平和垂直方向都居中

<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script>
svg=d3.select('svg')
svg.append('text').text('text').attr("x",25).attr('y',25).attr('text-anchor',"middle").attr('dy','.35em')svg.append('text').text('text').attr("x",50).attr('y',50).attr('text-anchor',"middle").attr('dy','.35em')svg.append('line').attr('x1',25).attr('y1',25).attr('x2',50).attr('y2',50).attr('stroke','black')</script>
</body>
</html>

也可以通过dx和dy属性设置偏移来实现，这里dx，dy都是将文本相对默认锚点做的偏移。

<html>
<body>
<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>
<svg id=zero width=300 height =300 ></svg>
<script>
svg=d3.select('svg')
svg.append('text').text('text').attr("x",25).attr('y',25)// .attr('text-anchor',"middle").attr('dx','-.8em').attr('dy','.35em')svg.append('text').text('text').attr("x",50).attr('y',50).attr('text-anchor',"middle").attr('dy','.35em')svg.append('line').attr('x1',25).attr('y1',25).attr('x2',50).attr('y2',50).attr('stroke','black')</script>
</body>
</html>

<svg:text text-anchor="start">左下</svg:text>
<svg:text text-anchor="middle">中下</svg:text>
<svg:text text-anchor="end">右下</svg:text>
<svg:text dy=".35em" text-anchor="start">左中</svg:text>
<svg:text dy=".35em" text-anchor="middle">中中</svg:text>
<svg:text dy=".35em" text-anchor="end">右中</svg:text>
<svg:text dy=".71em" text-anchor="start">左上</svg:text>
<svg:text dy=".71em" text-anchor="middle">中上</svg:text>
<svg:text dy=".71em" text-anchor="end">右上</svg:text>

D3 svg text标签控制相关推荐

svg中text标签换行显示,并实现拖拽移动text标签
如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割, 例如图片中的文 ...
svg中text标签字体、颜色、样式、大小、居中、旋转、垂直、text长度、tspan、textPath详解
svg中text标签属性 < text >基本属性定位 x.y, 颜色 fill, 描边 stroke,字号 font-size,粗细 font-weight,字体 font-famil ...
svg基础标签以及用法
SVG动画参数详解 https://blog.csdn.net/weixin_34133829/article/details/91749330https://blog.csdn.net/weixin ...
d3 svg path添加文本_10 倍高清不花！大麦端选座 SVG 渲染
作者 | 阿里文娱无线开发专家波涛责编 | 夕颜出品 | CSDN(ID:CSDNnews) 背景介绍用户在大麦上购票,需要自行选座.在大型场馆下,如何让 10 万+座位绘制达到闪开?这需要技 ...
svg text换行_5分钟看懂SVG反爬虫原理与绕过实战 | 知了干货分享
SVG反爬虫不同于字体反爬虫,它巧妙的利用css 与 svg的关系,将字符映射到网页中,看起来虽然正常,但是却抓取不到有效内容.本文带你深入浅出,破了SVG反爬虫的套路,学会之后,可应用于某点评网. ...
2021-08-11 svg基础标签
一,概述 svg是一种基于XML语法的图像格式,全称是可缩放矢量图( Scalable Vector Graphics ).其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上 ...
html字符串转svg,【SVG】如何操作SVG Text
上周我们学习了如何使用元素创建SVG文本.在实例中我们设置了x和y坐标来定位文本,也尝试了给SVG文本中的每个字符定位.关于元素还有很多内容. 在处理SVG文本时,不要局限于x和y属性.元素还有几个可 ...
JSP自定义标签_用简单标签控制标签体执行10次
什么也不说,直接上代码: import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet ...
azure vnc控制台_使用扩展和标签控制Azure成本
azure vnc控制台 Depending on our design and security, we can create functions or use built-in tools to ...

D3 svg text标签控制

D3 svg text标签控制相关推荐

最新文章

热门文章