SVG.text自动换行

最新推荐文章于 2024-06-18 21:49:10 发布
最新推荐文章于 2024-06-18 21:49:10 发布
阅读量516 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/h5skill/p/9111435.html
版权

1、（20180530）目前查到的资料，说 SVG自身 还没有 文字自动换行的功能

2、资料：

　　2.1、xml - Auto line-wrapping in SVG text - Stack Overflow.html（https://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text）

　　2.2、请问SVG text怎么设置字体大小？怎么换行？ - LeslieHoward的回答 - SegmentFault 思否.html（https://segmentfault.com/q/1010000008426252/a-1020000008428672）

　　2.3、大概类似的代码为：

<svg xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red;margin: 50px;">
    <switch>
        <foreignObject x="20" y="0" width="150" height="200" style="outline: 1px solid blue;">
            <p xmlns="http://www.w3.org/1999/xhtml">Text goes here, Text goes here, Text goes here, Text goes here</p>
        </foreignObject>
                
        <text x="20" y="20">Your SVG viewer cannot display html.</text>
    </switch>
</svg>

 

3、测试（20180619）

<switch>
    <foreignObject x="0" y="0" width="1500" height="2000" style="outline: 1px solid blue;">
        <p xmlns="http://www.w3.org/1999/xhtml">Text goes here, Text goes here, Text goes here, Text goes here.东<br/><br/>怡<br/><br/>变<br/><br/>04</p>
        <font xmlns="http://www.w3.org/1999/xhtml" face="黑体" color="red">东<br/><br/>怡<br/><br/>变<br/><br/>04</font>
        <html xmlns="http://www.w3.org/1999/xhtml">东<br/><br/>怡<br/><br/>变<br/><br/>04</html>
东
怡
变
04
    </foreignObject>
    
    <text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

　　ZC：（1）、文字外面不加 <p/>或<font/>或<html/>等等 的话，没有办法识别<br/>（直接用 回车 也不行）

　　ZC：（2）、<p/>、<font/>、<html/> 的属性“xmlns="http://www.w3.org/1999/xhtml"” 是必须的，如果没有 则文字是看不见的

4、

5、

 

转载于:https://www.cnblogs.com/h5skill/p/9111435.html

weixin_30333885
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
svg文本换行
A杨国璇的博客
11-19 907
方法： 使用 foreignObject 嵌套body-div(其他html标签) demo: <foreignObject width="xxx" height="xxx" x="8" y="xxx" fill="#000" xml:space='preserve'> <body xmlns="http://www.w3.org/1999/xhtml" class="svg-body"> <div class="xxx" style="xxx"> xxx
svg里的text不能自动换行的解决办法
yorksome的博客
09-10 4582
svg里的text不能自动换行，使用\n等方法都无效。 可以使用两个方法去实现多行文本。 方法一： 添加多个text，给这两个text赋一样的class，每个text设置不同的x，y坐标 const svg = d3.select("#oee-chart") .append("svg") .attr("width", width) .attr("height",...
SVG中 text 文本的自动换行
daihaoxin的专栏
05-13 6384
今天在做一个使用svg做的交互动画，使用到了svg 里的 text 元素，遇到了换行的问题。最后采用了 foreignObject 包裹 DOM 元素，利用 DOM 的文本布局能力自动处理换行，无需计算内部坐标。 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <foreignObject width="480" height="115" x="100" y="100"&
SVG text 自动换行算法_svg text超出换行
最新发布
2401_84620303的博客
06-18 476
svgsvgtexttspantexttspany两种方法各有千秋，方法1可以精确控制换行位置，但是需要计算具体的坐标。方法2无需计算内部坐标，但它是根据单词来分割的，针对长英文单词也无能为力。笔者碰到的就是单个长英文单词也要换行显示，所以只能用方法1。产品需求是文本根据屏幕大小自动适配，如果宽度不够就换行显示。效果如下图所示：Outperformance 这个单词被截断。原理就是先在text元素下插入一个tspan，将单词里的字母逐个填进去，判断元素宽度是否达到限制。如果超过限制就再插入一个。
SVG text 自动换行算法
IT博客技术分享
11-12 2441
最近做的项目涉及到 web 绘图，采用 d3 操作svg实现。图中通常会用到文本，而svg里的text元素不像普通 DOM 元素那样能很好地处理文本换行，所以要用到一些技巧。 通常有两种做法。 1.用tspan把text拆成多行，重新计算每个tspan的y坐标。 <svg xmlns="http://www.w3.org/2000/svg"> &l...
svg text文本换行
ishell1021的博客
06-30 8053
1.svg text文本换行的方法. 常用的有两种方法: 方法一.使用text添加多个tspan绘制文字 用tspan把text拆成多行，重新计算每个tspan的y坐标。 <svg xmlns="http://www.w3.org/2000/svg"> <text font-size="14"> <tspan x="0" y="10">医药制造业国家</tspan> <tspan x="0" y="2...
svg中text换行,vml里面textbox实现换行
傾城如夢
04-03 767
svg中text换行： 可以在text中加入tspan元素 例如： 显示： &lt;text id="_Gef_14" x="65px" y="28.75px" text-anchor="middle"&gt; &lt;tspan x="81" y="28.75px" dy="-13"&gt;啊啊啊啊啊啊啊 &lt;/ts
D3.js封装文本实现自动换行和旋转平移等功能
10-21
本文将介绍一个名为`appendMultiText`的函数，它能够帮助我们在SVG中轻松地创建自动换行的多行文本，并且支持旋转和平移。这个函数是对之前关于SVG中使用`text`和`tspan`元素实现换行功能的进一步封装。 首先，我们...
html5 svg插件,html5轻量级操纵和制作SVG动画的js库-svg.js
weixin_39743369的博客
06-10 631
svg.js是一个轻量级的操纵和制作SVG动画的js插件库。svg.js没有任何的外部依赖，它遵循麻省理工学院的许可( MIT License)下许可证的条款。使用方法插入一个SVG可以使用SVG()方法在指定的元素中创建一个SVG。var draw = SVG('drawing').size(300, 300)var rect = draw.rect(100, 100).attr({ fill:...
svg 文本换行
热门推荐
sclxf的专栏
09-15 1万+
SVG 的强大能力之一是它可以将文本控制到标准 HTML 页面不可能有的程度，而无须求助图像或其它插件（后者会带来可访问性挑战）。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。　　一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。　　可以使用 tspan 元素将文本元素分成几部分，允许每部
svg.textwap.js:这个插件覆盖了 SVG.Text 对象的 text 和 tspan 方法。 支持给定文本宽度的文本换行。 该插件基本上根据包含的空格拆分文本，并尝试对 SVG.Text 对象的指定宽度进行最佳匹配
07-09
svg.textwrap.js 这是库的插件，它覆盖了SVG.Text的默认text和tspan方法，以支持换行。 svg.textwrap.js 根据 MIT 许可条款获得许可。 用法 在 html 文档中包含 svg.js 后包含此插件。 不要忘记指定width行的文本元素的width ，否则不会发生换行。 如果使用此插件，则默认情况下所有文本项都将被文本换行。 为了避免元素上的文本换行，有两种选择： 如果在创建时没有为SVG.Text对象设置width则不会发生换行。 如果为给定元素指定了width ，则可以通过{element}.textWrapped({boolean})方法切换该元素的换行。 这允许细粒度的文本换行调整和运行时文本换行更新。 该插件符合框架，因此指定的所有方法（应该）按预期工作。 依赖关系 除了 svg.js 本身之外，没有任何依赖项。
D3.js实现文本的换行详解
11-22
一、文字换行是什么问题？ 现有一字符串： var str = "云中谁寄锦书来，雁字回时，月满西楼"; 李清照的一剪梅，读过吗？ 在 body 里添加一个 svg 元素，大小如下： var width = 300; var height = 300; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); 然后添加文字，用 text 元素，这样的代码我们很熟悉了： var text = svg.append("text") .attr("x"
svg中text标签换行显示,并实现拖拽移动text标签
ju__ju的博客
04-02 2218
如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割, 例如 图片中 的文本 嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒 然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒'] //x 和 y 是做鼠标移动时回传出来的 let arr =['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒...
基于svg.js可编辑图像中的文本换行
切图工的博客
05-19 4357
svg中的文本与一般页面中的文本并不一样，svg中的文本使用<text></text>标签来包住文字，所以页面中文本换行功能无法使用，这时候就要我们自己设置部分属性来使其换行。     首先是基本的svg文本使用一个text标签包住。<text id="SvgjsText1008" font-family="宋体" class="board-text" y="162.00" font-size="
svg text换行_5分钟看懂SVG反爬虫原理与绕过实战 | 知了干货分享
weixin_39983051的博客
01-08 192
SVG反爬虫不同于字体反爬虫，它巧妙的利用css 与 svg的关系，将字符映射到网页中，看起来虽然正常，但是却抓取不到有效内容。本文带你深入浅出，破了SVG反爬虫的套路，学会之后，可应用于某点评网。一、初识SVG反爬：为了防止面对监狱编程，我在本地自己做了一个网页用于爬虫测试。任务是爬取票据中的产品价格信息，按照往常一样审查元素定位目标节点，但是发现事情并不简单。看图：¥符号后面并没有我...
【 D3.js 高级系列 — 1.0 】 文本的换行
weixin_30640769的博客
03-02 533
在 SVG 中添加文本是使用 text 元素。但是，这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？高级系列开篇前言从今天开始写高级系列教程。还是那句话，由于本人实力有限，不一定保证入门-进阶-高级，是一级比一级难的，大家选自己需要的阅读即可。高级系列预计会先写一些常见的小问题（如本文）和剩下的三个布局（矩阵树图、堆栈图、捆图），然后写一些较复杂的图的制作方法，以及其交互式操作，例...
css文本换行_svg中的文字显示——换行与截断
weixin_39821035的博客
11-29 824
svg对于文字处理的支持比较弱，无法像 DOM 元素直接实现换行与截断。最近在做的项目需要对不同长短的文字进行自适应的显示，所以，对svg中文字换行与截断的方法进行一下汇总。1. 用foreignObject包裹 DOM 元素，利用 DOM 的文本布局能力。[1]<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject w...
学习笔记——SVG.js中文本元素text相关方法
qq_41339126的博客
05-16 1668
SVG.js插件中text元素的相关方法svg.text()、newLine()、length()、text.text()、tspan()、build()、rebuild()、path()、textPath()、ax()、ay()、amove()、font()、leading()、clear()
svg中text文本自动换行
04-07
This is a long text that needs to be wrapped into multiple lines in SVG. </text> </svg> ``` 在上面的代码中，`<rect>`元素用于创建一个背景矩形，`<text>`元素用于创建一个文本标签。`textWrap`属性设置为`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值