代码之家 › 专栏 › 技术社区 › S Meaden

SVG可以像html表格行那样堆叠没有y坐标的文本行吗?[副本]

svg html

S Meaden · 技术社区 · 6 年前

是否可以在SVG中显示多行文本而不使用 dy

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="15" font-size="15">
    <tspan>tspan line 1</tspan>
    <tspan>tspan line 2</tspan>
    <tspan>tspan line 3</tspan>
  </text>
</svg>

我已经输入了上面的代码。我要所有的文字都向左齐平 tspan 成为一个新行。是 茨潘 我唯一能用的标签?我希望SVG使用换行符垂直放置文本行。我不想手动输入 .

根据我所读的,每一行应该出现在另一行的下面。他们是,但他们也交错跨越。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="0" y="0" font-size="15">
    <tspan dy="15">tspan line 1</tspan>
    <tspan dy="15">tspan line 2</tspan>
    <tspan dy="15">tspan line 3</tspan>
  </text>
</svg>

我想应该加上 x 迪 属性设置为固定值时,更改字体大小时会发生什么情况?

这比我刚开始做的要好:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:space="preserve">
  <text x="0" y="0" font-size="15" font-family="courier new" dy="0">
    <tspan x="0" dy="15">tspan line 1</tspan>
    <tspan x="0" dy="15">tspan line 2</tspan>
    <tspan x="0" dy="15">tspan line 3</tspan>
  </text>
</svg>

十 和对所有人 茨潘 s?也许是像 line-height text 元素?

文本标记似乎没有设置增量y的属性。在注释中建议使用JQuery设置全部属性 茨潘 s、看起来像是 迪 属性可以接受其他类型的值,如点和百分比!有办法设置值是其父文本元素字体大小的120%?我试着把它设为120%,但它似乎不像我期望的那样工作。当我在 迪 属性,它会从屏幕上消失。当我把它设置为 12 或 12px 它保持在相同的位置。如果我设置为 12%

http://codepen.io/anon/pen/PqBRmd

它似乎可以接受以下任何一种:
http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength

我还查找了可接受的值类型 迪 dx ,我无法理解 http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute.

更新4:

0 回复 | 直到 6 年前

1.21 gigawatts 6 年前

看起来这将一行接一行地隔开,而不必在每个行中硬编码字体大小 tspan

<svg style="border:1px solid black" >
    <text x="0" y="0" font-size="15" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

如果更改字体大小,行间距将继续为 120% 彼此分开或 1.2em

<svg style="border:1px solid black" >
    <text x="0" y="0" font-size="20" dy="0">
        <tspan x="0" dy=".6em">tspan line 1</tspan>
        <tspan x="0" dy="1.2em">tspan line 2</tspan>
        <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
</svg>

例子- http://codepen.io/anon/pen/oXMVqo

Reptar 9 年前

tspan是正确的方法。这就是为什么:

<tspan x="10" dy="15">tspan line 1</tspan>

参考: http://tutorials.jenkov.com/svg/tspan-element.html

Shimon Doodkin 7 年前

var drawx=part.x||0;
var drawy=part.y||0;
var fontSize=part.fontSize||14; 
var lineHeight=part.lineHeight||1.25; 
var style=part.style||""; 
var fontFamily=part.fontFamily||"Arial"; 
var text=part.text.split('\n').map(function(a,i){ return '<tspan x="'+drawx+'" y="'+(drawy+fontSize*lineHeight+i*fontSize*lineHeight)+'">'+a+'</tspan>' }).join('\n');

tqrSvg+='<text x="'+drawx+'" y="'+drawy+'" style="'+style+'" font-family="'+fontFamily+'" font-size="'+fontSize+'">'+text+'</text>'

Andy Swift 5 年前

如果对某人有帮助:

如果从Illustrator生成SVG,则可以绘制多条平行线,并使用路径工具上的文本创建连续段落。