我需要在SVG中输出多行文本.为此,我使用以下方案:
<text>
<tspan> First line </tspan>
<tspan> Second line </tspan>
</text>
文本的第一行和第二行可以具有不同数量的字符,这些字符可以动态地改变.我希望第二行出现在第一行下面,并且两个文本都要居中.
我可以让第二条线通过添加出现在第一线下方dy="15"第二<tspan>.
我可以<tspan>通过添加text-anchor="middle"来对齐每个人的文本.
但是如何做那些相对中心的对齐<tspan>呢？
我尝试使用x="0"每个,<tspan>但显然它不起作用,因为每个<tspan>都有不同的宽度,较短的行中的渲染文本向左移动.
有没有办法<tspan>只使用CSS和/或SVG 对齐不同宽度的2 的中心.
我有一个字符串数组.说,
['Jan 11','Feb 11']
我正在用这些字符串创建一个垂直文本
<text x="60" y="154" text-anchor="middle" style="text-anchor: middle; font: normal normal normal 12px/normal Helvetica, Arial; " font="12px Helvetica, Arial" stroke="none" fill="#ffffff" transform="rotate(90 59.75 150)">
<tspan>Jan 11</tspan>
</text>
在渲染svg之后,我发现文本的高度是36px.现在有一种方法可以计算预先根据字体大小预先渲染的文本的高度吗？
假设我想以编程方式在以下SVG <tspan>中的<text>元素中插入一个附加内容:
<svg width="300" height="500">
<text x="50" y="100">
<tspan x="50">one</tspan>
<tspan x="50" dy="20">two</tspan>
<tspan x="50" dy="20">three</tspan>
</text>
</svg>
除了其他方面,这可以通过纯JavaScript(.appendChild),jQuery(.append)和d3.js(.append)来完成.但是,尽管所有三种方法都成功插入了元素,但我只能在d3.js插入时实际显示它:
在这个小提琴中看到减少的案例:http://jsfiddle.net/2NLJY/.
在我测试的浏览器中,行为是一致的:Firefox,Chrome和Safari(所有OS X 10.8).
这里发生了什么？
我有一个页面,我们使用SVG来呈现序列图.所表示的一些数据有可能偶尔会很长,所以我想限制TSPAN元素的宽度并提供省略号,同时允许用户将鼠标悬停在文本上并显示全文.
最初我尝试将CSS与text-overflow属性结合使用,方法是将值设置为"省略号",这是我正在寻找的确切行为,但它没有可用的功能(大笨蛋)还有其他任何方式限制文本的长度并允许在诸如悬停的动作上显示全文？
我不确定问这个的最好方法.我想将多个tspan子元素附加到单个svg文本对象.我有以下代码.
var tspanElement = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
var majNote1 = document.getElementById('majNote1');
function myFunction() {
for(i=1;i<6;i++){
tspanElement.textContent=i;
tspanElement.setAttribute("id",i);
majNote1.appendChild(tspanElement);
}
}
当我运行它时,看起来tspan元素只被附加一次而不是5次.是否可以重复使用相同的tspan变量并将其追加5次？
你可以在http://codepen.io/cmgdesignstudios/pen/VePwog?editors=101上看到一个例子.
我试图理解 svg 中的 tspan 标签，这里有一些奇怪的东西。看下面的代码，FF 和 Chrome 在 tspans 之间引入了一个水平偏移，但不应该有。
<svg width="625" height="470" xmlns="http://www.w3.org/2000/svg">
<text y="406" x="379" text-anchor="start" stroke-width="0" stroke="#000000" fill="#FF0000">
<tspan x="379" font-weight="normal" font-style="normal" font-size="24" font-family="Arial" fill="#000000" dy="0">a</tspan>
<tspan font-weight="normal" font-style="normal" font-size="24" font-family="Arial" fill="#000000">aa</tspan>
</text>
</svg>
现在转到http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html并在 SVG 编辑器（顶部菜单栏中的第二个按钮）中输入代码并应用更改。tspans 之间的偏移不存在！我不知道为什么，HTML、SVG 和 CSS 似乎没有什么特别之处。
希望有人能解开这个谜。它似乎与字体大小有关，更改会更改偏移量。但是，当它设置为 0px 时，文本就会消失。